title: Center content in Weebly navigation bar
body: <p>So I have picked a base theme in Weebly and have been completely changing it with my own CSS and HTML. I am trying to modify a horizontal navigation bar. The bar itself is centered, but the text inside the bar listing the pages (home, videos, design, resume, etc.) is not. Below I have included the CSS responsible for the navigation bar. Thank you for your help!</p>
  
  <pre><code>#nav-wrap .container {
  clear: both;
  overflow: hidden;
  position: relative;
  }
  
  #nav-wrap .container {
  background:url(nav-bg-light.jpg) repeat-x top;
  height:45px;
  }
  
  #nav-wrap .container ul {
  list-style: none;
  }
  
  #nav-wrap .container ul li {
  list-style: none;
  float: left;
  background:url(nav-saperator-light.jpg) no-repeat right;
  padding-right:2px;
  }
  
  #nav-wrap .container ul &gt; li:first-child a,
  #nav-wrap .container ul &gt; li:first-child a:hover,
  #nav-wrap .container ul span:first-child li a,
  #nav-wrap .container ul span:first-child li a:hover{
  border-radius:5px 0px 0px 5px;
  }
  
  #nav-wrap .container ul li a {
  float: left;
  display: block;
  font-family: 'Rosario', sans-serif;
  color: #262626;
  padding: 0px 30px;
  border: 0;
  outline: 0;
  list-style-type: none;
  font-size: 14px;
  line-height:45px;
  text-shadow: 0px -1px 0px #fff;
  }
  
  #nav-wrap .container ul li:hover {
  background:url(nav-saperator-hover-light.jpg) no-repeat right;
  }
  
  #nav-wrap .container ul li a:hover {
  background:url(nav-bg-hover-light.jpg) repeat-x top ;
  }
  
  #nav-wrap .container ul li:active {
  background:url(nav-saperator-active-light.jpg) no-repeat right;
  }
  
  #nav-wrap .container ul li a:active {
  background:url(nav-bg-active-light.jpg) repeat-x top ;
  }
  
  #nav-wrap .container ul li#active {
  background:url(nav-saperator-current-light.jpg) no-repeat right;
  }
  
  #nav-wrap .container ul li#active a {
  background:url(nav-bg-current-light.jpg) repeat-x top ;
  }
  </code></pre>