title: Looking for guidance on CSS code for class
body: <p>I'm doing an assignment in my class with HTML and CSS. I'm having trouble getting the navigation for phone and tablet views to look like the attached image. I'm assuming this could be resolved toward the bottom of the CSS code? Also, my page looks very wide compared to the photos in all views. I'm very much a novice at this if it isn't obvious.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: #b8dbed;
    font-family: Arial;
  }
  
  header {
    background-color: #000033;
    color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    height: 120px;
    padding-top: 30px;
    padding-left: 3em;
    text-align: center;
  }
  
  nav {
    font-weight: bold;
    padding: 1.5em;
    font-size: 120%;
    float: left;
    width: 160px;
  }
  
  nav a {
    text-decoration: none;
  }
  
  h1 {
    margin-bottom: 0;
    font-family: Georgia;
    margin-top: 0;
    font-size: 3em;
    letter-spacing: 0.25em;
  }
  
  h2 {
    color: #3399cc;
    font-family: Georgia;
    text-shadow: 1px 1px 1px #cccccc;
  }
  
  h3 {
    font-family: Georgia;
    color: #000033;
  }
  
  dt {
    color: #000033;
  }
  
  .resort {
    color: #5c7fa3;
    font-weight: bold;
  }
  
  nav ul {
    margin: 0;
    padding-left: 0;
    font-size: 1.2em;
  }
  
  main ul {
    list-style-image: url(marker.gif);
  }
  
  footer {
    font-size: 75%;
    font-style: italic;
    text-align: center;
    font-family: Georgia;
    padding: 20px;
    margin-left: 190px;
    background: #ffffff;
  }
  
  #contact {
    font-size: 90%;
  }
  
  #wrapper {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    max-width: 960px;
    min-width: 2048px;
    background: #90c7e3;
    box-shadow: 3px 3px 3px #333333;
    border: 1px solid #000033;
    background-image: linear-gradient(to bottom, #ffffff, #90c7e3);
  }
  
  main {
    padding-top: 1px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    display: block;
    background: #ffffff;
    margin-left: 190px;
    padding-left: 30px;
  }
  
  #homehero {
    height: 300px;
    background-image: url(coast2.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-left: 190px;
  }
  
  #trailhero {
    height: 300px;
    background-image: url(trail.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-left: 190px;
  }
  
  #yurthero {
    height: 300px;
    background-image: url(yurt.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-left: 190px;
  }
  
  * {
    box-sizing: border-box;
  }
  
  a:link {
    color: #5c7fa3;
  }
  
  a:visited {
    color: #344873;
  }
  
  a:hover {
    color: #a52a2a;
  }
  
  header,
  main,
  nav,
  footer,
  figure,
  figcaption,
  aside,
  section,
  article {
    display: block;
  }
  
  #mobile {
    display: none;
  }
  
  #desktop {
    display: inline;
  }
  
  @media only screen and (max-width: 64em) {
    body {
      background: #ffffff;
    }
    #wrapper {
      min-width: 0;
      width: auto;
      box-shadow: none;
      border: none;
    }
    header {
      padding-top: 0.5em;
      padding-bottom: 0.5em;
      padding-left: 0;
      height: auto;
    }
    h1 {
      letter-spacing: 0.1em;
    }
    main {
      margin-left: 0;
    }
    nav {
      float: none;
      width: auto;
      text-align: center;
      padding: 0.5em;
    }
    nav li {
      display: inline;
      padding-top: 0.25em;
      padding-bottom: 0.25em;
      padding-left: 0.75em;
      padding-right: 0.75em;
    }
    #homehero {
      margin-left: 0;
      height: 200px;
    }
    #yurthero {
      margin-left: 0;
      height: 200px;
    }
    #trailhero {
      margin-left: 0;
      height: 200px;
    }
    footer {
      margin-left: 0;
    }
  }
  
  @media only screen and (max-width: 37.5em) {
    main {
      padding-top: 0.1em;
      padding-bottom: 0.1em;
      padding-right: 1em;
      padding-left: 1em;
      font-size: 90%;
    }
    h1 {
      font-size: 2em;
    }
    nav {
      padding: 0;
    }
    nav li {
      display: block;
      margin: 0;
      border-bottom: 2px solid #330000;
    }
    nav a {
      display: block;
    }
    #homehero {
      background-image: none;
      height: 0;
    }
    #yurthero {
      background-image: none;
      height: 0;
    }
    #trailhero {
      background-image: none;
      height: 0;
    }
    #mobile {
      display: inline;
    }
    #desktop {
      display: none;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt; Pacific Trails Resort &lt;/h1&gt;
  &lt;/header&gt;
  &lt;nav&gt;
    &lt;ul&gt;
      &lt;a href="index.html"&gt;Home&lt;/a&gt; &lt;a href="yurts.html"&gt;Yurts&lt;/a&gt; &lt;a href="activities.html"&gt;Activities&lt;/a&gt; &lt;a href="reservations.html"&gt;Reservations&lt;/a&gt;
    &lt;/ul&gt;
  
  &lt;/nav&gt;
  &lt;div id="homehero"&gt;
  
  &lt;/div&gt;
  &lt;main&gt;
    &lt;h2&gt;Enjoy Nature in Luxury&lt;/h2&gt;
    &lt;p&gt; &lt;span class="resort"&gt;Pacific Trails Resort&lt;/span&gt; offers a special lodging experience on the California North Coast with panoramic views of the Pacific Ocean. Your stay at Pacific Trails Resort includes a sumptuously appointed private yurt and a cooked-to-order
      breakfast each morning.&lt;/p&gt;
    &lt;ul&gt;
      &lt;li&gt;Unwind in the heated outdoor pool and whirlpool&lt;/li&gt;
  
      &lt;li&gt;Explore the coast on your own or join our guided tours&lt;/li&gt;
  
      &lt;li&gt;Relax in our lodge while enjoying complimentary appetizers and beverages&lt;/li&gt;
  
      &lt;li&gt;Savor nightly fine dining with an ocean view&lt;/li&gt;
    &lt;/ul&gt;
    &lt;br&gt;
    &lt;div id="contact"&gt;
      &lt;span class="resort"&gt;Pacific Trails Resort&lt;/span&gt; &lt;br&gt; 12010 Pacific Trails Road &lt;br&gt; Zephyr, CA 95555 &lt;br&gt;
  
      &lt;br&gt;
  
      &lt;a id="mobile" href="tel:888-555-5555"&gt;888-555-5555&lt;/a&gt; &lt;br&gt;
      &lt;span id="desktop"&gt;888-555-5555&lt;/span&gt;
  
      &lt;br&gt;
  
    &lt;/div&gt;
  &lt;/main&gt;
  
  &lt;footer&gt;
    Copyright © 2018 Pacific Trails Resort&lt;br&gt;
    &lt;a href="mailto:e.sween12@gmail.com"&gt;e.sween12@gmail.com&lt;/a&gt;
  &lt;/footer&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Any help or guidance would be appreciated.</p>
  <p><img src="https://i.stack.imgur.com/IJHVN.png" alt="this is how the page should look in all views" /></p>