How do I center my nav bar to the screen?

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!



from Recent Questions - Stack Overflow https://ift.tt/36hRlC1
https://ift.tt/eA8V8J

Comments

Popular posts from this blog

Spring Elasticsearch Operations

Network Error and Timeout on Authorize.net JS

Object oriented programming concepts (OOPs)