title: Responsive Website: Faulty Logo and Banner Wrap, Navigation Bar
body: <p>I'm having a couple of problems with my responsive website. My first problem is simple: the banner is wrapping beneath the logo.</p>
  
  <p><a href="https://i.stack.imgur.com/kUmqk.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kUmqk.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/esv9J.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/esv9J.jpg" alt="enter image description here"></a></p>
  
  <p>What I'd like to achieve is something similar to the site for the <a href="http://www.stlzoo.org/animals/abouttheanimals/" rel="nofollow noreferrer">St. Louis Zoo</a>, where the logo and banner image (the turtle) stay on the same row as the page gets smaller. How do they do this?</p>
  
  <p>My second problem is that as the page continues to resize, the navigation bar becomes sloppy. As you can see, the "contact" link is too close to the home, projects, and store links. <a href="https://i.stack.imgur.com/u96XK.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u96XK.jpg" alt="enter image description here"></a> </p>
  
  <p>I'm new to responsive web design and I'm wondering - can the problem with the nav bar be found in the Global Styles or do I need to create more CSS code within the Tablet Section? Thank you. Full Code Below.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Artistic Animation&lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;link href="styles.css" type="text/css" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="banner"&gt;
  &lt;header&gt;
  &lt;h1&gt;
      &lt;a href="index.html"&gt;
  &lt;img class="banner" src="images/Artistic_Logo2.png" alt="logo"&gt;
  &lt;/a&gt;
  
  &lt;img class="banner" src="images/Artistic_Banner2.png" alt="banner"&gt;
  &lt;/h1&gt;
  &lt;/header&gt;
  &lt;/div&gt;  
  
  &lt;div class="navigation"&gt;
  &lt;nav&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="index.html"&gt;HOME&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="projects.html"&gt;PROJECTS&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;STORE&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/div&gt;
  
  
  &lt;div class="row"&gt;
  &lt;div class="col-3 col-m-3"&gt;
  &lt;img src="images/image2.jpg" alt="image"&gt;
  &lt;h1&gt;Header 1&lt;/h1&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, vocibus incorrupte dissentiet qui id, 
  cu sit etiam iisque equidem.&lt;/p&gt;
  &lt;img src="images/image3.jpg" alt="image"&gt;
  &lt;h1&gt;Header 2&lt;/h1&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, vocibus incorrupte dissentiet qui id, 
  cu sit etiam iisque equidem.&lt;/p&gt;
  &lt;img src="images/image4.jpg" alt="image"&gt;
  &lt;h1&gt;Header 3&lt;/h1&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, vocibus incorrupte dissentiet qui id, 
  cu sit etiam iisque equidem.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="col-6 col-m-9"&gt;
  &lt;h1&gt;Header 1&lt;/h1&gt;
  &lt;p class="p1"&gt;Lorem ipsum dolor sit amet, vocibus incorrupte 
  dissentiet qui id, 
  cu sit etiam iisque equidem.&lt;/p&gt;    
  &lt;h1&gt;Header 2&lt;/h1&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, vocibus incorrupte dissentiet qui id, 
  cu sit etiam iisque equidem.&lt;/p&gt;
  &lt;p&gt;Resize the browser window to see how the content responds to 
  the resizing.&lt;/p&gt;
  
  
  &lt;/div&gt;
  
  &lt;div class="col-3 col-m-12"&gt;
  &lt;aside&gt;
  &lt;h2&gt;What?&lt;/h2&gt;
  &lt;p&gt;This is information about the website&lt;/p&gt;
  &lt;h2&gt;Where?&lt;/h2&gt;
  &lt;p&gt;This website was created in St. Louis, MO.&lt;/p&gt;
  &lt;h2&gt;How?&lt;/h2&gt;
  &lt;p&gt;Visit our contact page for more information.&lt;/p&gt;
  &lt;/aside&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;&lt;!--closes row--&gt;
  &lt;footer&gt;
  &lt;p&gt;&amp;copy;2016 WEBSITE&lt;/p&gt;
  &lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>*{box-sizing:border-box;}
  
  .row:after{content:"";
         clear:both;
         display:block;}
  
  [class*="col-"]{float:left;
              padding:15px;}
  
  /*global styles*/               
  
  .banner {display: inline-block;
       margin-left:auto;
       margin-right:auto;}
  
  .p1 {margin-bottom: 400px;} 
  
  .navigation {text-align:center;
           background-color:#000000;
           padding:11px;}
  
  #banner {text-align:center;
       margin-bottom: 40px;}
  
  a{text-decoration:none;
    color:white;}
  
  a:visited {color:white;}
  
  nav{margin:auto;
  height:auto;
  }
  
  nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-family:Arial
  }
  
  nav li {
  padding: 10px;
  margin-bottom: 7px;
  background-color :#000000;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  display:block;
  margin-left:30px;
  margin-right:30px;
  }
  
  
  nav li:hover {
  background-color: #8E8E8E;}
  
  aside{background-color:#19A5DE;
   padding:15px;
   color:#fff;
   text-align:center;
   font-size:1.1em;
   box-shadow: 0 1px 3px rgba(0,0,0,0.12),
              0 1px 2px rgba(0,0,0,0.24);
  }
  
  footer{background-color:#19A5DE;
   color:#fff;
   text-align:center;
   font-size:0.9em;
   padding:15px;
  }
  
  img{max-width:100%;
  height:auto;
  }
  
  /*mobile phones first*/
  [class*="col-"]{
  width:100%;
  }
  
  /*tablet*/
  @media only screen and (min-width:600px)
  
  {
  /*12 column grid*/
  
  .col-m-1 {width: 8.33%;}
  .col-m-2 {width: 16.66%;}
  .col-m-3 {width: 25%;}
  .col-m-4 {width: 33.33%;}
  .col-m-5 {width: 41.66%;}
  .col-m-6 {width: 50%;}
  .col-m-7 {width: 58.33%;}
  .col-m-8 {width: 66.66%;}
  .col-m-9 {width: 75%;}
  .col-m-10 {width: 83.33%;}
  .col-m-11 {width: 91.66%;}
  .col-m-12 {width: 100%;}
  
  nav{height:auto;}
  
  nav li{display:inline;}
  }   
  
  @media only screen and (min-width:768px)
  {   
  /*12 column grid*/
  
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}  
  
  nav{height:auto;}
  
  nav li{display:inline;
     text-align:center;}  
  </code></pre>
  
  <p><strong>EDIT</strong>: The reason I can't combine the logo and banner into one image is because I need for the logo to remain a hyperlink to the home page. </p>