How do I center my nav bar to the screen? [duplicate] - html

Question

This question already has answers here:
How do I center floated elements?
(12 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I have a problem with my Nav Bar. I need it to be centered on the screen, so it is in the middle of everything. But my Nav Bar will only be on the left side of my screen.
I tried to use Margin to fix the issue, but then it will not be responsive to the rest, so that does not work.
Here is my code for the 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>
Ignore the "href", they will be sorted afterwards
the 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;
}
I did read some of the others answered questions but without any luck from them, hope you can help me once again!

Answer 1

Just add display: inline-block; to the CSS rule for ul to make it only as wide as its contents and therefore also to allow the text-align: center for nav to have an effect:
* {
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 {
display: inline-block;
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;
}
<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>

Answer 2

Try putting the nav in center tags.
Like this:
<center>
<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>
</center>
Sorry if this doesn't help. I couldn't fully understand your problem.

Answer 3

Try this. Don't use <center> tag, it's obsolete.
html:
<header>
<nav>
<ul>
<li>Menu</li>
</ul>
</nav>
</header>
css:
header { width: 100%; }
nav { width: 980px; margin: 0 auto; display: block; }
margin: 0 auto; will center the element. just make sure that it has a width, otherwise this will not work.

Answer 4

try this =)
* {
margin: 0;
padding: 0;
background-color: rgb(53, 53, 53);
text-decoration: none;
}
nav {
position: absolute;
width: 100%;
height: 100px;
text-align: center;
display: block;
margin: auto;
border: 2px solid white;
}
ul {
display: inline-block;
text-align: center;
width: max-content;
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
margin: auto;
}
ul li a {
font-family: 'PT Sans', sans-serif;
color: white;
font-size: 100%;
padding: 0px 10px;
display: inline-block;
}
ul li a:hover {
color: red;
}
<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>