title: Two asides not going side by side but on top of each other
body: <p>So i'm making a website about media query but i have a problem.</p>
  
  <p>There are two asides that are supposed to move side to side of each other and are 50% of the page. The problem is that they don't move side to side but on top of each other.</p>
  
  <p>Looks like a problem that should just be solved by adding width:50%; to both oh the asides but i does not seem to work. I have also tried float left and right and a lot of thing but none of the things i have tried seem to work.</p>
  
  <p>I should also note that the whole page is in a flexbox which probably is a part of the problem.</p>
  
  <p>Here is the code for the media query, where the problem is:</p>
  
  <pre><code>@media (min-width: 30em) and (max-width: 37.5em){
  
      body section, footer, header{
          display: flex;
          flex-wrap: row wrap;
      }
  
      .aside1, .aside2{
          font-family: 'Damion', cursive;
          width:50%;
      }
  
  }
  </code></pre>
  
  <p>Here is also the markup of the html. Only the important things (i think):</p>
  
  <pre><code>&lt;section&gt;
      &lt;aside class="aside1"&gt;&lt;h2&gt;Aside 1&lt;/h2&gt;&lt;p&gt;Lorem ipsum.&lt;/p&gt;&lt;/aside&gt;
      &lt;aside class="aside2"&gt;&lt;h2&gt;Aside 2&lt;/h2&gt;&lt;p&gt;Lorem ipsum.&lt;/p&gt;&lt;/aside&gt;
      &lt;article&gt;
         &lt;h1&gt;Article&lt;/h1&gt;
         &lt;p&gt;&lt;b&gt;Lorem ipsum.&lt;/b&gt;&lt;/p&gt;
         &lt;p&gt;Lorem ipsum.&lt;/p&gt;
      &lt;/article&gt;
  &lt;/section&gt;
  </code></pre>