title: When screen is smaller, background for my flex boxes doesnt follow them when they go vertical row
body: <p>Okay so, my issue is, do you see when its maximized, how it has the background behind the flexboxes?  Now if you minimize the screen, since it's responsive, it will put it in 2 rows, but the background for the flexboxes is only in the 1st row its not on the 2nd/3rd and so, it's not behind every box, and thats my issue, would appreciate if someone could fix and explain, FIDDLE: <code>https://jsfiddle.net/vu4eaw2t/</code> CODE(CHECK FIDDLE THO CODE IS JUST HERE SO THAT I CAN MAKE THIS POST):</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" href="style.css"&gt;
          &lt;script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/design.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body style="margin: 0;"&gt;
          &lt;div class="navmenu"&gt;
              &lt;ul style="list-style: none;" class="nav"&gt;
                  &lt;li&gt;Home&lt;/li&gt;
                  &lt;li&gt;Purchase&lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul style="list-style: none;" class="navb"&gt;
                  &lt;li&gt;&lt;a&gt;Account&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="features"&gt;
              &lt;div class="featuresbox"&gt;&lt;p class="FeatureTitle"&gt;Lorem Ipsum&lt;/p&gt;&lt;p class="FeatureDescription"&gt;Lorem ipsum&lt;/p&gt;&lt;/div&gt;
              &lt;div class="featuresbox"&gt;&lt;/div&gt;
              &lt;div class="featuresbox"&gt;&lt;/div&gt;
              &lt;div class="featuresbox"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS ( AGAIN CHECK FIDDLE DON'T USE THIS FIDDLE WILL EXLPAIN YOU MY PROBLEM BUT MAKE SURE TO READ WHAT I SAID ABOVE ):</p>
  
  <pre><code>body {
      font-family: 'Arial Narrow Bold', sans-serif;
      background-color: rgba(84, 111, 219, 0.959);;
      margin-bottom: 15px;
  }
  
  .navmenu {
      width: 100%;
      display: flex;
      background-color: rgb(28, 109, 231);
      justify-content: space-between;
  }
  
  .navb {
      margin-right: 24px;
  }
  
  .navmenu &gt; ul &gt; li {
      float: left;
      color: rgb(255,255,255);
      font-size: 18px;
      margin-right: 50px;
  }
  
  .navmenu &gt; ul &gt; li:hover {
      transform: scale(1.03);
      color: rgb(119, 151, 240);
      transition: 0.4s;
  }
  .navmenu &gt; ul &gt; li:not(:hover) {
      transform: scale(1);
      color: rgb(255,255,255);
      transition: 0.4s;
  }
  
  .features {
      width: 100%;
      height: fit-content;
      margin-top: 50px;
      background-color: rgba(75, 105, 221, 0.651);
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
  }
  
  .featuresbox {
      height: 250px;
      width: 270px;
      border-radius: 4px;
      background-color: rgba(45, 81, 224, 0.651);
      float: left;
      margin: 25px;
      color: rgb(255,255,255);
  }
  
  .FeatureTitle {
      font-size: 25px;
      text-align: center;
  }
  
  .FeatureDescription {
      text-align: center;
      margin-left: 6px;
      margin-right: 6px;
  }
  
  @media screen and (max-width: 950px) {
      .navmenu &gt; ul &gt; li {
          font-size: 15px;
          margin-right: 33px;
      }
      .features {
          height: 300px;
      }
  }
  </code></pre>