HTML, CSS - Большой гибкий круг для навигации

Question

Я спрашивал об этом ранее, и мне отправили: Могу ли я создать div с изогнутым дном?

Но изогнутый нижний div - это не то, что мне нужно. Мне нужен очень большой круг (не только с изогнутым дном, но и с правильным кругом) ... который расположен с отрицательным верхним краем и имеет гибкую ширину при изменении размера браузера windows.

Вот изображение именно того, что я хочу

Вот изображение того, как макет должен выглядеть уменьшенным - чтобы вы могли видеть весь круг

Вот что у меня есть: https://jsfiddle.net/etmgho6s/

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

#nav-bg {
width: 90vw;
height: 90vw;
margin: 0 auto;
padding: 0;
margin-top: -45vw;
background: red;
border-radius: 50%;
position: absolute;
}

#title {
margin: 0 auto;
text-align: center;
position: absolute;
margin-top: 20px;
}

Любая помощь будет признательна!

Спасибо, Джо sh

Answer 1

У вас это работает?

#container {
width: 100%;
margin: 0 auto;
padding: 0;
position: relative;
display: flex; /* line added */
justify-content: center; /* line added */
}

#nav-bg {
width: 150vw;
height: 90vw;
margin: 0 auto;
padding: 0;
margin-top: -60vw;
background: red;
border-radius: 50%;
position: absolute;
}

#title {
margin: 0 auto;
text-align: center;
position: absolute;
margin-top: 20px;
}

<div id="container">

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

</div>