title: How to get items within a div container to stack when browser is resized
body: <p>Currently, I am having trouble get my main content to scale up and down during browser resizing. The navbar is adjusting just fine, but the other content is not. Whenever I resize my browser the div elements seem to be staying the same size and not adjusting with everything else. Does anyone have any suggestions on what I am doing wrong or what else I could try?</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>* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  #blue {
    background-color: #57afb5;
    max-width: 470px;
    height: 350px;
    flex: 0 0 65%;
    margin-left: auto;
    margin-right: auto;
  }
  
  #dark-green {
    background-color: #29914c;
    max-width: 470px;
    height: 350px;
    flex: 0 0 65%;
    margin-left: auto;
    margin-right: auto;
  }
  
  #green {
    background-color: #91e3ad;
    max-width: 470px;
    height: 350px;
    flex: 0 0 65%;
    margin-left: auto;
    margin-right: auto;
  }
  
  #orange {
    background-color: #c98a32;
    max-width: 470px;
    height: 350px;
    flex: 0 0 65%;
    margin-left: auto;
    margin-right: auto;
  }
  
  #top {
    display: flex;
    margin-top: 2%;
  }
  
  #bottom {
    display: flex;
    margin-top: 2%;
  }
  
  .main-content {
    display: flex;
    flex-wrap: wrap;
  }
  
  .footer {
    margin-top: 8%;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 10px;
    margin-left: auto;
    margin-right: auto;
    background-color: #f7f7f7;
  }
  
  
  /* responsive web design*/
  
  @media only screen and (max-width: 960px) {
    #blue {
      width: 50%;
    }
    #dark-green {
      width: 50%;
    }
    #green {
      width: 50%;
    }
    #orange {
      width: 50%;
    }
    .footer {
      width: 100%;
    }
  }
  
  
  /*end of responsive web design*/</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='main-content'&gt;
    &lt;div id='Navbar_Link-Toggle' style='font-size: 20px'&gt;
      &lt;i id='main' class='fas fa-bars'&gt;&lt;/i&gt;
    &lt;/div&gt;
    &lt;div class='container'&gt;
      &lt;div class='Navbar'&gt;
        &lt;a class='links' href=''&gt;FOOD&lt;/a&gt;
        &lt;a class='links' href=''&gt;FUN&lt;/a&gt;
        &lt;img id='center-logo' src='img/SAMO.png'&gt;
        &lt;a class='links' href=''&gt;HISTORY&lt;/a&gt;
        &lt;a class='links' href=''&gt;LOCATION&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class='header'&gt;
      &lt;img id='food' src='img/food.jpg'&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='colors'&gt;
    &lt;div id='top'&gt;
      &lt;div id='blue'&gt;&lt;/div&gt;
      &lt;div id='dark-green'&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id='bottom'&gt;
      &lt;div id='green'&gt;&lt;/div&gt;
      &lt;div id='orange'&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>