My current issue involves my Nav Bar. I am striving to center it on the screen, positioned in the middle of everything. However, my Nav Bar stubbornly remains fixed to the left side of the screen.
I attempted to utilize Margin to rectify this problem, but found that it compromised its responsiveness to the rest of the layout, rendering that solution ineffective.
Below is the code for my Nav Bar:
HTML:
<nav>
<ul>
<li>
<a href="BlogTest.html">
Home
</a>
</li>
<li>
<a href="BlogTest.html">
About Me
</a>
</li>
<li>
<a href="BlogTest.html">
Contact Me
</a>
</li>
<li>
<a href="BlogTest.html">
Blog
</a>
</li>
</ul>
</nav>
Disregard the "href" at the moment, they will be adjusted later
CSS:
*{
margin: 0%;
padding: 0%;
background-color: rgb(53, 53, 53);
text-decoration: none;
}
nav{
width: 100%;
height: 100px;
text-align: center;
display: inline-block;
}
ul{
text-align: center;
}
ul li{
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}
ul li a{
font-family: 'PT Sans', sans-serif;
color: white;
font-size: 200%;
padding: 0px 20px;
display: block;
display: inline-block;}
ul li a:hover {
color: red;
}
Despite reviewing other answers to similar queries, I have not had any success so far. Hopefully, you can provide some much-needed assistance!