title: Flexbox justify-content property stops working at a media query
body: <p>I've been trying to vertically center my logo and unordered list in my header with flex CSS, which I've succeeded in doing, but now I can't get them to float to the left and right sides of the header. The <code>float:left</code> and <code>float:right</code> values I had before don't seem to affect the child divs, so I've added </p>
  
  <pre><code>justify-content: space-between;
  </code></pre>
  
  <p>to the header to achieve this. It seems to work when the browser is full width, however when my first media query begins at 1080px, I have set my unordered list to disappear and be replaced by a navigation menu icon. For some reason the menu icon refuses to float to the right of the header – does anyone have any idea why?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.header {
  width: 75%;
  height: 100px;
  margin: 0 auto; 
  display: flex;
  align-items: center;
  justify-content: space-between;
  }
  
  img.standard.logo { 
  height: 40px;
  width: 360px; 
  }
  
  .header nav ul{
  display:block;
  padding:0;
  margin-top:12px;
  margin-bottom:0px;
  list-style:none; 
  }
  
  @media only screen 
  and (min-width : 0px) 
  and (max-width : 1080px) {
  
  
  img.standard.logo {
  height: 38px;
  width: 342px;
  }
  
  img.menu.button { 
  display:block;
  margin-top:3px;
  width:35px;
  height:35px; 
  background-size: 100%;
  }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header class="header"&gt;
     &lt;!-- LOGOS --&gt;
     &lt;a href="#"&gt;
     &lt;img class="standard logo" src="http://www.mywebsite.co.uk/wp-content/uploads/2015/12/Logo-2.png"&gt;
     &lt;img class="white logo" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/01/Logo_White.png"&gt;&lt;/a&gt;
     &lt;!-- LOGOS --&gt;
     &lt;img class="menu button" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/01/Menu.png"&gt;
     &lt;!-- HEADER NAVIGATION MENU --&gt; 
     &lt;nav class="header-nav"&gt;
        &lt;div class="menu-header-menu-container"&gt;
           &lt;ul id="menu-header-menu" class="menu"&gt;
              &lt;li id="menu-item-463"&gt;
                 &lt;a href="#"&gt;WORK&lt;/a&gt;
                 &lt;ul class="sub-menu"&gt;
                    &lt;li id="menu-item-584"&gt;&lt;a href="#"&gt;LANDSCAPES&lt;/a&gt;&lt;/li&gt;
                    &lt;li id="menu-item-473"&gt;&lt;a href="#"&gt;SEASCAPES&lt;/a&gt;&lt;/li&gt;
                    &lt;li id="menu-item-478"&gt;&lt;a href="#"&gt;MACRO&lt;/a&gt;&lt;/li&gt;
                    &lt;li id="menu-item-477"&gt;&lt;a href="#"&gt;CITIES&lt;/a&gt;&lt;/li&gt;
                    &lt;li id="menu-item-475"&gt;&lt;a href="#"&gt;LONG EXPOSURE&lt;/a&gt;&lt;/li&gt;
                    &lt;li id="menu-item-480"&gt;&lt;a href="#"&gt;MISCELLANEOUS&lt;/a&gt;&lt;/li&gt;
                 &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li id="menu-item-10"&gt;&lt;a href="#"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
              &lt;li id="menu-item-464"&gt;&lt;a href="#"&gt;SHOP&lt;/a&gt;&lt;/li&gt;
              &lt;li id="menu-item-923"&gt;
                 &lt;a href="#"&gt;SOCIAL&lt;/a&gt;
                 &lt;ul class="sub-menu"&gt;
                    &lt;li id="menu-item-11"&gt;&lt;a target="_blank" href="#"&gt;FACEBOOK&lt;/a&gt;&lt;/li&gt;
                    &lt;li id="menu-item-924"&gt;&lt;a href="#"&gt;INSTAGRAM&lt;/a&gt;&lt;/li&gt;
                    &lt;li id="menu-item-15"&gt;&lt;a target="_blank" href="#"&gt;FLICKR&lt;/a&gt;&lt;/li&gt;
                 &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li id="menu-item-14"&gt;&lt;a href="#"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
        &lt;/div&gt;
     &lt;/nav&gt;
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>