I am having trouble centering my navigation bar and making it horizontal on my online CV. Currently, it is vertical and positioned to the left of the page. Additionally, I would like to know how I can implement a flexbox or grid layout for my navigation bar.
#toolbar h3 {
font-weight: bolder;
font-style: italic;
font-family: Baskerville;
border: black;
border-bottom-width: 100px;
display: inline-flex;
flex-direction: row;
font-size: xx-large;
text-transform: capitalize;
}
.nav{
border:5px solid black;
margin:0;
padding:0;
list-style-type: none;
display: inline-block;
flex-direction: column;
color: black;
}
.nav li{
display:flex;
color: black;
float: left;
}
.nav a{
display:inline-block;
padding:10px;
}
#toolbar{
background-color: silver;
overflow: hidden;
}
#toolbar a:hover {
background-color: red;
color: black;
}<div id="toolbar">
<p>
<ul class="nav">
<li><a href="#startAbout"><h3> About Me</h3></a></li>
<li><a href="#startAcademic"><h3> Academic Profile</h3></a></li>
<li><a href="#startExperience"><h3> Past Experience</h3></a></li>
</ul>
</p>
</div>