whoooooaaadude

pl

HTML

<body>

  <div class="bruceBanner">
    <a href="#">
      <img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
    </a>
  </div>

<nav id="navBar">
  <ul class="navLinks">
   <li><a href='#'>About</a></li>
   <li><a href='#'>Hours</a></li>
   <li><a href='#'>Contact</a></li>
  </ul>
</nav> <!--#navBar-->
</body>

CSS

.bruceBanner img {
  border: 2px solid black;
 
  height: 172px;
  width: 553px;
  display: block;
  margin: 0 auto;  /*After setting a width this will make object sit centrally within parent container. Auto sets left and right                                  margins equally. 0 denotes no top or bottom margin */
  
}


.navLinks li { 
border: 1px solid black;
display:inline-block;
margin: 0 auto;


} /* Adjust left/right margin as appropriate */

#navBar {
  border: 1px solid black;
  width:553px;
  margin: 0 auto;
}