CodePen

HTML

            
              <div id="nav_bar">
            <ul>
                <li> <a href="#">Home</a> </li>
                <li> <a href="#">Forums</a> </li>
                <li> <a href="#">Shipping Info</a> </li>
                <li> <a href="#">Contact us</a> </li>
                <li> <a href="#">About us</a> </li>
            </ul>
        </div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              #nav_bar {
     float: left;
     width: 100%;
     overflow: hidden;
     position: relative;
 }
 #nav_bar ul {
     list-style-type: none;
     width: 565px;
      height: 50px;
     height: 100%;
     padding: 0;
     clear: left;
      float: left;
      position: relative;
      left: 50%;/*整个分页向右边移动宽度的50%*/
      text-align: center;
 }
 #nav_bar li {
     margin: 0 5px;
     display: block;
     height: 50px;
     float: left;
     position: relative;
     right: 50%;/*将每个分页项向左边移动宽度的50%*/
 }
 #nav_bar a:hover {
     background-color: #000000;
 }
 #nav_bar a {
     display:block;
     height: 100%;
     color:white;
     text-decoration:none;
     line-height: 50px;
     padding: 0 1em 0 1em;
     background-color: #900000;
 }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................