title: Why Is the content Inside my div popping out?
body: <p>I Have a div (RView) that has other div content inside but unlike my other divs when the page shrinks in width the content doesn't reshape it pops out of the div. Why is this?, I want the images to the left of the text &amp; all conntent in a line like it currently is but not popping out the div. Also this is my first ever attempt at building a website so I know it's no where near perfect but I'm still learning.</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>body {
    margin: 0px;
  }
  
  .RView {
      width: 100%;
      background-color: #BEBFBE;
      justify-content: center;
      display: flex;
  }
  
  .RView div {
      display: flex;
  }
  
  .RView p {
      margin: 20px 0px 0px 20px;
      justify-content: center;
      width: 150px;
  }
  
  .ReVW {
      display: inherit;
      width: 105px;
      height: 100px;
      margin: 20px 0px 20px 80px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="RView"&gt;
      &lt;div&gt;&lt;a href="https://www.cnet.com/uk/reviews/"&gt;&lt;img src="Img/CNet.png" class="ReVW" alt="CNet Review"&gt;&lt;/a&gt;&lt;p&gt;"Incredibly beautiful phone case for an affordable price" - CNet&lt;/p&gt;&lt;/div&gt;
      &lt;div&gt;&lt;a href="https://www.amazon.co.uk/ref=nav_logo/262-3052852-5868165"&gt;&lt;img src="Img/AMZN.png" class="ReVW" alt="Amazon Review"&gt;&lt;/a&gt;&lt;p&gt;"Definetly some new competition on the market for the phone case industry" - Amazon&lt;/p&gt;&lt;/div&gt;
      &lt;div&gt;&lt;a href="http://www.techadvisor.co.uk/review/phone-cases/"&gt;&lt;img src="Img/RV1.png" class="ReVW" alt="Bolt Review"&gt;&lt;/a&gt;&lt;p&gt;"Wide range of case designs for any phone, just amazing cases" - Bolt Reviews&lt;/p&gt;&lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>