title: Flexbox: Divs are placing beside each other rather than below
body: <p>I am creating a basic portfolio webpage. I have created the sidebar successfully and also the hero image. The two divs that are supposed to be below the hero image are displayed to the right of it instead.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="wrap"&gt;
  
          &lt;div id="side-bar-left"&gt;
  
              &lt;div id="contents-left"&gt;
  
                  &lt;div id="overlay"&gt;
  
                      &lt;p id="logo"&gt;CS&lt;/p&gt;
  
                      &lt;hr class="mini-underline"&gt;
  
                      &lt;div id="links-container"&gt;
  
                          &lt;a class="link" href="#"&gt;Welcome&lt;/a&gt;&lt;br&gt;
                          &lt;a class="link" href="#"&gt;Project One&lt;/a&gt;&lt;br&gt;
                          &lt;a class="link" href="#"&gt;Project Two&lt;/a&gt;&lt;br&gt;
                          &lt;a class="link" href="#"&gt;Project Three&lt;/a&gt;&lt;br&gt;
                          &lt;a class="link" href="#"&gt;Contact&lt;/a&gt;&lt;br&gt;
  
                      &lt;/div&gt;
  
                      &lt;img id="setting-icon" src="img/settings.png" onclick="openSettings()"&gt;
  
                      &lt;div id="settings-container"&gt;
  
                          &lt;img src="img/arrow.png" id="arrow-icon" onclick="closeSettings()"&gt;
  
                          &lt;p id="ss-button" onclick="removeSS()"&gt;Smooth Scroll&lt;/p&gt;
                          &lt;p id="hs-button" onclick="hideSB()"&gt;Hide Sidebar&lt;/p&gt;
  
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
              &lt;div id="hero"&gt;
  
                  &lt;div id="hero-overlay"&gt;
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
          &lt;div id="picture-box"&gt;
  
              &lt;div id="picture-container"&gt;
  
                  &lt;div id="picture-overlay"&gt;
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div id="project-one-container"&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#wrap {
      width: 100%;
      height: auto;
  
      display: -ms-flexbox;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-box;
      display: box;
  
      -ms-flex-direction: row;
      -webkit-box-orient: horizontal;
      -moz-box-orient: horizontal;
      -ms-box-orient: horizontal;
      box-orient: horizontal;
  }
  
  /* ####################### Sidebar stuff ####################### */
  
      #side-bar-left {
          width: 150px;
          background-color: white;
          -ms-flex: 0 150px;
          -webkit-box-flex:  0;
          -moz-box-flex:  0;
          -ms-box-flex:  0;
          box-flex:  0;  
      }
  
          #contents-left {
              position: fixed;
              top: 0;
              left: 0;
  
              height: 100vh;
              width: 150px;
              background-color: white;
  
              overflow: hidden;
  
              display: -webkit-flex;
              display: flex;
              -webkit-flex-direction: column;
              flex-direction: column;
          }
  
              #overlay {
                  width: 150px;
                  height: 0px;
  
                  background-color: rgba(56, 56, 56, 0.7);
              }
  
  /* ####################### Content area ####################### */
  
  /* ####################### Hero image ####################### */
  
      #hero {
          width: 100%;
          height: 50vh;
          display: flex;
          justify-content: center; /* align horizontal */
          align-items: center;
  
              background-image: url("img/swirl_pattern.png");
              background-attachment: fixed;
      } /* rgb(27, 188, 155);*/
  
          #hero-overlay {
              width: 100%;
              height: 50vh;
  
              background-color: rgba(27, 188, 155, 0.8);
              display: flex;
              justify-content: center; /* align horizontal */
              align-items: center;
          }
  
      #picture-box {
          height: 25vh;
          width: 100%;
  
          background-color: #ecedec;
          float: left;
      }
  
          #about-container {
              width: 600px;
              height: 400px;
  
              background-color: black;
              margin-right: auto;
              margin-left: auto;
          }
  
              #picture-container {
                  height: 250px;
                  width: 250px;
  
                  border-radius: 50%;
                  background-color: white;
              }
  
                  #picture-overlay {
                      No styling as of yet
                  }
  
  /* ####################### Project one page ####################### */
  
      #project-one-container {
          width: 100%;
          height: 150vh;
  
          background-color: red;
      }
  </code></pre>
  
  <p><a href="http://i.stack.imgur.com/u1NnE.png" rel="nofollow">What it's supposed to look like</a></p>
  
  <p><a href="http://i.stack.imgur.com/kimrz.png" rel="nofollow">What it looks like now (wrong)</a></p>