Circle background header

by Manju06

HTML

<div id="container">

		<div id="nav-bg"></div>
		<h1 id="title">Title goes here</h1>

</div>

CSS

#container {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	position: relative;
}

#nav-bg {
  width: 80vw;
  height: 80vh;
	margin: 0 auto;
	margin-top: -45vh;
	background: red;
	border-radius: 60%;
	position: relative;
}

#title {
  top:65%;
  position: absolute;
left: 50%;
transform: translateX(-50%);
}