title: How to Create Responsive Web Page With Static Header?
body: <p>I'm real happy with the header I just created:<a href="https://i.stack.imgur.com/uZxjP.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uZxjP.jpg" alt="enter image description here"></a></p>
  
  <p>But unfortunately, the goal of this project is to create a responsive website using rows and columns. We were instructed to use a 12 column grid system. The first row includes everything above the navigation bar, with the logo and heading taking up the first 10 columns and the social media links taking up the last 2 columns. Originally, the heading ("knights basketball academy") and social media links were supposed to wrap beneath the logo when the page is resized. But now I'm changing my mind because the result is a disaster:<a href="https://i.stack.imgur.com/NDe9f.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NDe9f.jpg" alt="enter image description here"></a></p>
  
  <p>I know it's possible to fix this, but there would be too much white space and I really only need for the nav bar and content below it to be responsive anyway. So as the page is scrunched down to mobile, it should look like this:<a href="https://i.stack.imgur.com/WEgkg.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WEgkg.jpg" alt="enter image description here"></a><a href="https://i.stack.imgur.com/VXwIb.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VXwIb.jpg" alt="enter image description here"></a><a href="https://i.stack.imgur.com/bQtIc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bQtIc.jpg" alt="enter image description here"></a></p>
  
  <p>Notice the logo and header do not change as the page is resized. Please help out if you know how to obtain this effect. I'm thinking it might be with a container but I'm not sure. Thank you!</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Knights Basketball Academy&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;header&gt;
      &lt;div class="row"&gt;
        &lt;!--first row--&gt;
        &lt;div class="col-10"&gt;
  
          &lt;div class="logo"&gt;
            &lt;a href="index.html"&gt;
              &lt;img src="images/logo2.png" alt="logo" height="250" width="250"&gt;
            &lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div class="header"&gt;
            &lt;img src="images/header.png" alt="header" height="250" width="880"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-2"&gt;
          &lt;div class="social_twitter"&gt;
            &lt;a href="#"&gt;&lt;img src="images/twitter.png"&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="social"&gt;
            &lt;a href="#"&gt;&lt;img src="images/facebook.png"&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="social"&gt;
            &lt;a href="#"&gt;&lt;img src="images/youtube.png"&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="social"&gt;
            &lt;a href="#"&gt;&lt;img src="images/instagram.png"&gt;&lt;/a&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--ends first row--&gt;
    &lt;/header&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="roster.html"&gt;ROSTER&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;EVENTS&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;CALENDAR&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  
  
    &lt;div class="row"&gt;
      &lt;!--second row--&gt;
  
      &lt;div class="col-3 col-m-3"&gt;
        &lt;img src="images/image1.jpg" alt="Team Photo"&gt;
      &lt;/div&gt;
  
      &lt;div class="col-6 col-m-9"&gt;
        &lt;h1&gt;Welcome&lt;/h1&gt;
  
        &lt;p&gt;Knights Basketball Academy is a non-profit amateur basketball club focused on individual player development and team concepts. With our elite coaching staff, we are confident that all players can achieve their own maximum potential while maintaining
          excellent character and integrity.
          &lt;br&gt;
          &lt;br&gt; Contact us at info@knightsbasketballacademy.com to learn how to become a Knight today.&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;!--ends second row--&gt;
  
    &lt;footer&gt;
      &lt;p&gt;&amp;copy;2016 KNIGHTS BASKETBALL ACADEMY&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: 10px;
  }
  
  
  /*global styles*/
  
  .knights {
    margin-top: 0px
  }
  
  .logo {
    float: left;
    margin-left: 10px;
  }
  
  .header {
    float: left;
    margin-top: 10px;
    margin-left: 10px;
  }
  
  .social {
    float: left;
    margin-left: 2px;
    margin-right: 2px;
  }
  
  .social_twitter {
    float: left;
    margin-left: 80px;
  }
  
  .banner {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
  }
  
  .navigation {
    text-align: center;
    background-color: #000000;
    padding: 0px;
  }
  
  #banner {
    text-align: center;
    margin-bottom: 0px;
  }
  
  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: #C5202A;
    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: #000000;
    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-block;
    }
  }
  
  @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%;
      height: 260px;
    }
    .col-11 {
      width: 91.66%;
    }
    .col-12 {
      width: 100%;
    }
    nav {
      height: auto;
    }
    nav li {
      display: inline-block;
      text-align: center;
    }
  }
  </code></pre>