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 {
     height:50px;
  text-align: center;
 }
 #nav_bar ul {
     list-style-type: none;
  display: inline-block;
     border: 1px solid red;
     width: 565px;
     height: 100%;
     text-align: center;
     padding: 0;
    text-align: center;
  font-size: 0;
  letter-spacing: -4px;
  word-spacing: -4px;
 }
 #nav_bar li {
    margin: 0 5px;
display: inline-block;
  *display: inline;
  zoom:1;
  letter-spacing: normal;  
  word-spacing: normal;
  font-size: 12px;
 }
 #nav_bar a:hover {
     background-color: #000000;
 }
 #nav_bar a {
     display:inline-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 ..................