title: How do I make this SVG and Buttons not overlap each when they scale?
body: <p>I am having some trouble keeping this svg, and flexbox buttons from scaling over each other when scaling down. I want to use flexbox so that I can control the buttons and SVG overlay over this hero shot at all time.</p>
  
  <p>Is there a better way to accomplish this, or am I screwed lol?
  Any recommendations would be appreciated.</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-css lang-css prettyprint-override"><code>* {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }
      
      .ob-hero-container {
          position: relative;
      }
      
      .herobtn-container {
          width: 80%;
          max-width: 800px;
          margin: 0 auto;
          position: absolute;
          top: 60%;
          right: 0;
          bottom: 0;
          left: 0;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
      }
      
      .herosvg-container {
          width: 80%;
          max-width: 800px;
          margin: 0 auto;
          position: absolute;
          top: -20%;
          right: 0;
          bottom: 0;
          left: 0;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
      }
      
      .herobtn-wrapper {
          border: 2px solid transparent;
          flex-grow: 1;
      }
      
      .herobtn1 {
          background-color: #000;
          color: #fff;
          padding: 10px;
          /*margin: .1em;*/
          text-align: center;
      }
      /* Tablet */
      
      @media (min-width:30em) and (max-width:50em) {
          .herobtn-wrapper {
              flex-basis: 50%;
          }
      }
      
      @media (max-width:50em) {
          .herobtn-container {
              position: relative;
              width: 100%;
          }
      }
      /* Mobile */
      
      @media (max-width:30em) {
          .herobtn-wrapper {
              flex-basis: 50%;
          }
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="ob-hero-container"&gt;
      &lt;!-- IMAGE BACKGROUND --&gt;&lt;img src="https://s21.postimg.org/jp1vyijrb/sample.jpg" width="100%"&gt;
      &lt;!-- END IMAGE BACKGROUND --&gt;
      &lt;div class="herosvg-container"&gt;&lt;img src="http://svgshare.com/i/23M.svg" width="100%"&gt;&lt;/div&gt;
      &lt;div class="herobtn-container"&gt;
          &lt;div class="herobtn-wrapper"&gt;
              &lt;div class="herobtn1"&gt;SHOP WOMEN'S&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="herobtn-wrapper"&gt;
              &lt;div class="herobtn1"&gt;SHOP MEN'S&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="herobtn-wrapper"&gt;
              &lt;div class="herobtn1"&gt;SHOP KIDS&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="herobtn-wrapper"&gt;
              &lt;div class="herobtn1"&gt;WATCH VIDEO&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>