display:inline ruining navbar

http://stackoverflow.com/questions/38045117/displayinline-ruining-navbar

by fido3993

HTML

<p id="skipnav"><a href="#main">Skip navigation</a></p>
    <div id="box">
      <h1>
        <img src="images/natoma.gif" width="368" height="65" alt="Hotel Natoma" title="" />
      </h1>
      <ul id="mainnav">
        <li><a href="index.html">Home</a></li>
        <li><a href="nearby.html">What&#39;s Nearby</a></li>
        <li><a href="http://bit.ly/bb3Sic" target="_blank">Location</a></li>
        <li><a href="greensf.html">Green SF</a></li>
      </ul>
      <nav> </nav>
      <div id="content">
        <h2 id="main">Guide to Green San Francisco</h2>
        <p>Must-see green destinations in San Francisco:</p>
        <ol>
            <li>Angel Island</li>
            <li>Bike network</li>
            <li>Cable Cars + Cable Car museum</li>
            <li>Conservatory of Flowers</li>
            <li>Crissy Field</li>
            <li>Golden Gate Park</li>
            <li>Hayes Farm</li>
            <li>Transit Museum</li>
            <li>Quesada Gardens</li>
         </ol>
      </div>
      <footer>
        <p id="contact">568 Natoma St. &#8226; San Francisco, CA 94103 &#8226; (415) 555-8378</p>
      </footer>
    </div>

CSS

/* Hotel Natoma */
@font-face {
  font-family: 'PTSansCaption';
  src: url('fonts/PTC55F-webfont.eot');
  src: local('☺'), url('fonts/PTC55F-webfont.woff') format('woff'), url('fonts/PTC55F-webfont.ttf') format('truetype'), url('fonts/PTC55F-webfont.svg#webfontaMnF3Xb4') format('svg');
  font-weight: normal;
  font-style: normal;
  }
nav, figcaption, figure, footer {
  display: block;
  }
body {
  font-family: tahoma, verdana, arial, sans-serif;
  padding: 0;
  margin: 0 auto;
  width: 30em;
  }
figcaption {
  text-align: center;
  margin: 0;
  padding: 0;
  }
h1 {
  text-align: center;
  font-family: PTSansCaption, georgia, "times new roman", times, serif;
  font-weight: normal;
  background: #082008;
  color: white;
  padding: 0;
  margin: 0;
  font-size: 2em;
  }
h2 {
  font-size: 1.5em;
  text-align: center;
  }
ol{
    list-style-type:lower-roman;
}
.center {
  margin: 0 auto;
  padding: 0;
  }
.center img {
  display: block;
  padding: 0 0 2em 0;
  margin: 0 auto;
  }
.right {
  margin: 0 1em 0 0;
  padding: 0;
  float: right;
  clear: right;
  }
.right img {
  display: block;
  padding: 0;
  margin: 0;
  }
#content {
  margin: 0;
  padding: 0 0 1em 1em;
  }
#skipnav {
  text-align: right;
  margin: 0;
  padding: 0;
  }
#mainnav {
  text-align:center;
  margin: 0;
  padding:0.25em;
  background: #93AD78;
  border-bottom: 0.25em solid #082008;
  /* display:inline;   I remove this */
    }
#box {
  border: 0.25em solid #082008;
  padding: 0;
  margin: 0;
  }
#contact {
  text-align: right;
  padding: 0.5em;
  border-top: 0.25em solid #082008;
  background: #93AD78;
  margin: 0;
  clear: right;
  }
#logo {
  background: #082008;
  padding: 0;
  margin: 0;
  }
#logo img {
  display: block;
  margin: 0 auto;
  padding: 0;
  }
a:link {
  color: #213621;
  }
a:visited {
  color: #526352;
  }
a:hover {
  color: black;
  }
a:active {
  color: #526352;
  }
#mainnav a:link {
  color: #213621;
  }
#mainnav a:visited {
  color: #394D39;
  }
#mainnav a:hover {
  color:...