HTML、CSS-用于导航的大型灵活圆圈

我早些时候问过这个问题，结果被发送到：

但我不想要一个弯曲的底部凹槽。 我追求的是一个非常大的圆（不仅仅是一个弯曲的底部，而是一个合适的圆）。。。它位于负边距顶部，在调整浏览器窗口大小时具有灵活的宽度

以下是我目前掌握的情况：

任何帮助都将不胜感激

---

谢谢，Josh这对你有用吗

#容器{
宽度：100%；
保证金：0自动；
填充：0；
位置：相对位置；
显示：已添加flex；/*行*/
对齐内容：居中；/*已添加行*/
}
#导航背景{
宽度：150vw；
高度：90vw；
保证金：0自动；
填充：0；
利润上限：-60vw；
背景：红色；
边界半径：50%；
位置：绝对位置；
}
#头衔{
保证金：0自动；
文本对齐：居中；
位置：绝对位置；
边缘顶部：20px；
}

导航内容在这里

这里有一个圆圈。它不仅是圆的，它是一个完美的圆。

#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;
}