title: Flexbox order property not working to order elements?
body: <p>So I have a header nav that has 3 elements, <code>.nav1, .site-branding (logo), .nav2.</code> I am trying to move the <code>.site-branding</code> (logo) in the center so: </p>
  
  <pre><code>NAV LOGO NAV
  </code></pre>
  
  <p><strong>Problem: The flexbox order property is not working when given to the 3 classes. Any ideas?</strong> </p>
  
  <p>Here is what it looks like right now: <a href="https://imgur.com/a/jSWox" rel="nofollow noreferrer">https://imgur.com/a/jSWox</a></p>
  
  <p>html</p>
  
  <pre><code>&lt;header id="masthead" class="site-header"&gt;
  
          &lt;div class="site-branding"&gt;
                          &lt;div class="site-branding-text"&gt;
                                      &lt;p class="site-title"&gt;&lt;a href="http://localhost/wordpress/" rel="home"&gt;Treehouse&lt;/a&gt;&lt;/p&gt;
                                      &lt;p class="site-description"&gt;Its an awesome website&lt;/p&gt;
                              &lt;/div&gt;
          &lt;/div&gt;&lt;!-- .site-branding --&gt;
              &lt;nav id="site-navigation" class="main-navigation nav2"&gt;
                  &lt;div class="menu-toggle"&gt;   
                      &lt;div id="sidebar-btn"&gt;
                          &lt;span&gt;&lt;/span&gt;
                          &lt;span&gt;&lt;/span&gt;
                          &lt;span&gt;&lt;/span&gt;               
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="menu-primary-menu-links-container"&gt;&lt;ul id="primary-menu" class="menu"&gt;&lt;li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-167"&gt;&lt;a href="http://localhost/wordpress/"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-165"&gt;&lt;a href="http://localhost/wordpress/about/"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-1987" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-218 current_page_item menu-item-has-children menu-item-1987"&gt;&lt;a href="http://localhost/wordpress/gallery/"&gt;Gallery&lt;/a&gt;&lt;button class="dropdown-toggle" aria-expanded="false"&gt;&lt;span class="dropdown-symbol"&gt;+&lt;/span&gt;&lt;span class="screen-reader-text"&gt;Expand child menu&lt;/span&gt;&lt;/button&gt;
  &lt;ul class="sub-menu"&gt;
      &lt;li id="menu-item-1988" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1988"&gt;&lt;a href="http://localhost/wordpress/book-a-workshop/"&gt;Book A Workshop&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;&lt;/div&gt;         &lt;/nav&gt;&lt;!-- #site-navigation --&gt;
              &lt;nav id="site-navigation" class="main-navigation nav1"&gt;
                  &lt;div class="menu-toggle"&gt;   
                      &lt;div id="sidebar-btn"&gt;
                          &lt;span&gt;&lt;/span&gt;
                          &lt;span&gt;&lt;/span&gt;
                          &lt;span&gt;&lt;/span&gt;               
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="menu-primary-menu-links-container"&gt;&lt;ul id="primary-menu" class="menu"&gt;&lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-167"&gt;&lt;a href="http://localhost/wordpress/"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-165"&gt;&lt;a href="http://localhost/wordpress/about/"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-218 current_page_item menu-item-has-children menu-item-1987"&gt;&lt;a href="http://localhost/wordpress/gallery/"&gt;Gallery&lt;/a&gt;&lt;button class="dropdown-toggle" aria-expanded="false"&gt;&lt;span class="dropdown-symbol"&gt;+&lt;/span&gt;&lt;span class="screen-reader-text"&gt;Expand child menu&lt;/span&gt;&lt;/button&gt;
  &lt;ul class="sub-menu"&gt;
      &lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1988"&gt;&lt;a href="http://localhost/wordpress/book-a-workshop/"&gt;Book A Workshop&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;&lt;/div&gt;         &lt;/nav&gt;&lt;!-- #site-navigation --&gt; 
      &lt;/header&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>@media screen and (min-width: 601px) {
  
      .site-header {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
      }
      .site-branding {
          text-align: center;
          flex:1 100%;
          /*flex: 1 0 auto;  */
          /*Grow to 1 in size, 0 it should NOT shrink in size when the screen is smaller (i.e. squeesh with navigation), auto - the site of container is whatever the size content in it is*/
      }
      #site-navigation {
          flex:0;
          margin: auto;
      }
  
      .main-navigation ul {
          /*flex-wrap: nowrap;*/
      }
  }
  
  @media screen and (min-width: 1080px) {
  
          html {
              font-size: 20px;
          }
              .main-navigation ul {
              flex-wrap: nowrap;
          }
  
          .site-branding {
              flex:0;
              order: 1;
          }
  
          #site-navigation {
              order: 1;
          }
  
           /*Navigation Laptop*/
          .nav2 {
              order:0;
          }
  
          .nav1 {
              order:1;
          }
  }
  </code></pre>