Why I cannot center my nav bar?

user5280872

h1{
       text-align:center;
       font-family: 'Nosifer', cursive;
       font-size:35px;

    }



    nav { 
        border-top: 5px solid black;
        padding:5px 5px;
                text-align:center;


         }

    nav a:link,a:visited { 
        border-radius: 0 0 15px 15px; 
        padding:0px 15px;
    }


    nav a {

        float: left;
        font-weight: bold;
        color: #000;
        margin: 0 5px; 
        background-color: #131313; 
        font-family: 'Nosifer', cursive;
        text-decoration: none;
        font-size: 20px;
        color:red;

        }

    nav a:hover {

        background-color: #D10000; 
        color: black;
        padding-top: 12px;
        padding-bottom: 10px;


        }


        .active{


            background-color: #D10000; 
            color: black;
            padding-top: 12px;
            padding-bottom: 10px;  


        }

        body{
            background-color: #ffe6e6;
        }


  <nav>
     <a href="#" class="active">HOME</a>
     <a href="#">COMPUTER PARTS</a>
     <a href="#">BUILD A COMPUTER</a>
     <a href="#">MEDIA</a>
     <a href="#">GO TO MAIN</a>
  </nav>

Can anyone please help me. I tried to use align="center", text-align:center; and I tried many other things but for some reason, it's not centering my nav bar in the center of my web page. Also when I tried to display an image at the bottom of the nav bar and center it, it does not center.

Michael Coker

Without seeing your markup, it's hard to say. But probably because of float: left on nav a. Remove that from nav a, and add display: inline-block;.

Collected from the Internet

Please contact [email protected] to delete if infringement.