title: Why is "flex-direction: row" not working for these images?
body: <p>I can't figure out why the images are stuck in a column, I am trying to use flex-row + wrap so they display essentially 8 squares but nothing I've tried seems to fix the issue, i've included an image below of what it should look like, hopefully that helps.</p>
  
  <p>any help is appreciated.</p>
  
  <p><a href="https://i.stack.imgur.com/6Mjnc.png" rel="nofollow noreferrer">what it should look like</a></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-js lang-js prettyprint-override"><code>function openNav() {
      document.getElementById("mySidenav").style.width = "500px";
      document.getElementById("buttoncontain").style.marginLeft = "250px";
  }
  
  function closeNav() {
      document.getElementById("mySidenav").style.width = "0";
      document.getElementById("buttoncontain").style.marginLeft = "0";
  } </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
      
  margin:0;
  width:auto;
  height:auto;
      
  }
  
  #container {
  display: flex;
  width:100vw;
      
  }
  
  .right {
  flex-direction:row;
  flex-wrap: row wrap;
  position: relative;
  width:auto;
  margin-left:5%;
      
  }
  
  .img1{
      
  width:auto;
  height:18em;
  
      
  }
  
  h1{
      
  margin-top:0.5em;
  font-size:1.5em;
  font-family: 'Karla', sans-serif;  
  font-weight:200;
  
  }
  
  .sidenav {
      height: 100%;
      width: 0;
      position: fixed; /* Stay in place */
      z-index: 1; /* Stay on top */
      top: 0; /* Stay at the top */
      left: 0;
      background-color: white;
      overflow-x: hidden;
      padding-top: 60px; 
      transition: 0.5s; 
  }
  
  #buttonnav{
      
  background-color: white; 
  height:100vh;
  width:3vw;
  padding:10px;
  margin:0;
  box-shadow: 4px 0px rgba(0, 0, 0, 0.1);
  position:relative;    
  }
  
  .svg1{
          
  margin:15px;
  cursor: pointer;
  
  }
  
  /* The navigation menu links */
  .sidenav a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: black;
      display: block;
      transition: 0.3s;
      font-family: 'Karla', sans-serif;
  }
  
  /* Navigation Hover */
  .sidenav a:hover {
      color: #f1f1f1;
  }
  
  /* Close Button */
  .sidenav .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
  }
  
  /* smaller screens, less than 450px */
  @media screen and (max-height: 450px) {
      .sidenav {padding-top: 15px;}
      .sidenav a {font-size: 18px;}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet"&gt; 
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;BeyondBelfastResearch&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
   
   &lt;div id="container"&gt;
  
   &lt;div id="mySidenav" class="sidenav"&gt;
    &lt;a href="javascript:void(0)" class="closebtn" onclick="closeNav()"&gt;&amp;times;&lt;/a&gt;
    &lt;a href="#"&gt;Overview&lt;/a&gt;
    &lt;a href="#"&gt;Research&lt;/a&gt;
    &lt;a href="#"&gt;Prototyping&lt;/a&gt;
    &lt;a href="#"&gt;Illustrations&lt;/a&gt;
    &lt;a href="#"&gt;Sketches&lt;/a&gt;
    &lt;a href="#"&gt;Essay&lt;/a&gt;
    &lt;a href="#"&gt;Final Design&lt;/a&gt;
    &lt;a href="#"&gt;Extra&lt;/a&gt;
  &lt;/div&gt;
     
  &lt;div id="buttonnav"&gt;
      &lt;span class="span1" onclick="openNav()"&gt;
      &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 77.5" class="svg1"&gt; &lt;rect width="128" height="13.7" class="svg1"/&gt; &lt;rect y="63.8" width="128" height="13.7" class="undefined"/&gt; &lt;/svg&gt;
      &lt;/span&gt; 
  &lt;/div&gt;
  
  &lt;div class="right"&gt;
     
     &lt;img alt="image1" class="img1" src="img/test1.jpg"&gt;&lt;h1&gt;Overview&lt;/h1&gt;
     
      &lt;img alt="image1" class="img1" src="img/test1.jpg"&gt;&lt;h1&gt;Research&lt;/h1&gt;
      
      &lt;img alt="image1" class="img1" src="img/test1.jpg"&gt;&lt;h1&gt;Prototyping&lt;/h1&gt;
      
      &lt;img alt="image1" class="img1" src="img/test1.jpg"&gt;&lt;h1&gt;Illustrations&lt;/h1&gt;
      
      &lt;img alt="image1" class="img1" src="img/test1.jpg"&gt;&lt;h1&gt;Sketches&lt;/h1&gt;
     
      &lt;img alt="image1" class="img1" src="img/test1.jpg"&gt;&lt;h1&gt;Essay&lt;/h1&gt;
      
      &lt;img alt="image1" class="img1" src="img/test1.jpg"&gt;&lt;h1&gt;Final Design&lt;/h1&gt;
      
      &lt;img alt="image1" class="img1" src="img/test1.jpg"&gt;&lt;h1&gt;Extra&lt;/h1&gt;
      
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;script src="js/sidebar.js"&gt;&lt;/script&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>