CSS/HTML Trying to center nav ul element -


i'm messing around on jsfiddle trying practice , came across issue couldn't solve. of me bit here. seems such silly question on basics of css reason 1 has me.

basically created generic navigation on jsfiddle , need ul element centered. i'm not sure why stuck on left side of screen.

http://jsfiddle.net/jrich/ker1jldf/

css , html follows:

       body {          background-color: #45859e;          font-family:'open sans', sans-serif;          font-style: normal;          font-weight: 400;          font-size: 12px;          margin: 0;          padding: 0;      }      ul {          padding: 0;          margin: 0 auto;      }      a:link {          text-decoration: none;      }      h3 {          padding: 5px;          margin: 0;      }      header {          width: 100%;          background-color: #fff;          margin: 0 auto;          border-bottom: solid 5px #00729b;      }      #nav {          margin: 0 auto;          padding: 10px 0;      }      #nav ul {          width: 100%;          margin: 0 auto;      }      #nav ul li {          text-align: center;          width: 100px;          display: inline-block;          border-bottom: solid 5px #00729b;          color: #000 border-radius: 50px;          -moz-border-radius: 50px;          -webkit-border-radius: 50px;          margin: 0 auto;      }      ul li h3 {          text-transform: uppercase;      }      ul li:hover {          color: #999999;          border-color: #00729b;          background: #ffffff;          /* old browsers */          background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%);          /* ff3.6+ */          background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(78%, #ffffff), color-stop(78%, #ffffff), color-stop(100%, #00729b));          /* chrome,safari4+ */          background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%);          /* chrome10+,safari5.1+ */          background: -o-linear-gradient(top, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%);          /* opera 11.10+ */          background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%);          /* ie10+ */          background: linear-gradient(to bottom, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%);          /* w3c */      }
<body>      <header>          <div id="nav">              <ul>                  <li id="one">                       <h3><a href="">home</a></h3>                        </li>                  <li>                      <h3><a href="">about</a></h3>                        </li>                  <li>                       <h3><a href="">contact</a></h3>                        </li>              </ul>          </div>      </header>      </body>

thanks!

add this

ul { padding: 0; margin: 0 auto; text-align:center;  }

fiddle


Comments

Post a Comment