Q:

how to center menu text on (border-bottom)

How can I center menu text on (border-bottom) with this code
Please help me correct the below html/css code
CSS & HTML

#main-menu {

width:all;
height:60px;
background-color:#555;
}

#main-menu a {
   text-indent: 85px;
   padding:15px; 
   position: relative;
   text-decoration:none;
   color:#fff;
   line-height: center;
   float:right;
   margin:center;
   left: -180px;
   display: inline-block;
   display: table-cell;
   text-align:center; 
   outline-width: center;
}

#main-menu a:hover {
color: #ffa500;
border-bottom:2px solid #ffa500; 
}
  
 
    <!DOCTYPE html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    <title>Hi</title>
    <meta charset="utf-8">
    </head>
    <body>

    <div id="main-menu">

          <a href="#">Home</a>
          <a href="#">Blog</a>
          <a href="#">Sign Up</a>
          <a href="#">login</a>
          <a href="#">call us</a>
          <a href="#">vip</a>

    </div> 
    </div>
    </div>

        </body>
    </html>

thanks...

A:

I wasnt sure what the issue was so I just restyled the nav for you, here
https://jsfiddle.net/dsvy5exv/17/
  #main-menu {

      width:100%;
      background-color:#555;
  }

  #main-menu a{
    text-align: center;
    padding: 15px 25px;
    color: white;
    font-size: 1.5em;
    text-decoration: none;
    display: inline-block;
  }

also keep in mind that its harder to override IDs. You can use them but it might be better to use classes in the place of IDs, unless you have specific reason to use them.

