Styling Inline Troubles - html

Question

I am trying to style - on one line - a group of buttons on the left, a navigation list in the middle, and a group of buttons on the right. I have grouped the navigation buttons for when the layout should change. Question is how to get the navigation structure on the same line in the center of the parent element?
I have made both overarching div elements into "display: inline" elements, and also the navigation.
Do I need to use absolute positioning of the nav for this to work? Why?
How can I center the nav horizontally?
My HTML:
// you need to have font smoothing on to avoid blurred and jagged lines
html{
background-color: rgb(235, 235, 235);
}
#main_body{
width: 1200px;
margin: auto;
background-color: white;
}
// first line header styling
#header_topnav{
width: 96%;
height: fit-content;
}
// button div, navigation and button div
.topnav_button{
width: 45px;
height: 35px;
margin-top: 18px;
margin-bottom: 10px;
}
// make div inline element to get it on one line
#left_buttons{
display: inline;
position: relative;
}
// make div inline element to get it on one line
// no other way than to go with left or margin
#right_buttons{
display: inline;
position: relative;
margin-left: 87.5%;
// left: 86.5%;
}
// vertical centering
ul {
margin: auto;
}
// for horizontal nav menu
li {
display: inline;
float: left;
margin-left: 10px;
}
// display block so clickable area is larger
li a {
display: block;
}
// how do you center this horizontally?
// do I have to make position absolute? can't I keep it in between the button sections?
#top_navmenu {
position: absolute;
display: inline;
margin-top: 28px;
}
<div id="main_body">
<header>
<section id="header_topnav">
<div id="left_buttons">
<button class="topnav_button"></button>
<button class="topnav_button"></button>
</div>
<nav id="top_navmenu">
<ul>
<li><a>F+</a></li>
<li><a>POLITIK</a></li>
</ul>
</nav>
<div id="right_buttons">
<button class="topnav_button"></button>
</div>
</section>
</header>
</div>

Answer 1

You don't need to use position: absolute. You can achieve this with flexbox.
Just add display:flex on the wrapper ( #header_topnav ) and flex-grow: 1 on the middle menu. This way the menu will occupy all the available space between the left and right buttons.
Also when sharing code here on SO please be sure you share valid code.
HTML code is missing some closing tags
// is not a valid comment in CSS. Use /* comment */ instead.
See below
html {
background-color: rgb(235, 235, 235);
}
#main_body {
width: 100%;
margin: auto;
background-color: white;
}
#header_topnav {
height: fit-content;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.topnav_button {
width: 45px;
height: 35px;
margin-top: 18px;
margin-bottom: 10px;
}
#left_buttons {
display: inline;
position: relative;
}
#right_buttons {
position: relative;
}
ul {
margin: auto;
display: flex;
flex-direction: row;
}
li {
margin-left: 10px;
}
li a {
display: block;
}
#top_navmenu {
margin-top: 28px;
flex-grow: 1;
display: flex;
align-items: center;
}
<div id="main_body">
<header>
<section id="header_topnav">
<div id="left_buttons">
<button class="topnav_button"></button>
<button class="topnav_button"></button>
</div>
<nav id="top_navmenu">
<ul>
<li><a>F+</a></li>
<li><a>POLITIK</a></li>
</ul>
</nav>
<div id="right_buttons">
<button class="topnav_button"></button>
</div>
</section>
</header>
</div>