title: Image beside text (Responsive)
body: <p>i've made a section with image on the left and text on the right, and it look good till i change the browser width or height. everything goes wrong,</p>
  
  <p>Here is what it looks like before i change the width :
  <a href="https://i.stack.imgur.com/MhqX8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MhqX8.jpg" alt="enter image description here"></a></p>
  
  <p>After :
  <a href="https://i.stack.imgur.com/nXx1Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nXx1Y.png" alt="enter image description here"></a></p>
  
  <p>What im trying to achieve looks something like below :
  <a href="https://i.stack.imgur.com/shUj8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/shUj8.png" alt="enter image description here"></a>
  what i'm trying to achieve on the small screens (the same idea, not the same photo&amp;text)</p>
  
  <p>Here is my code :
  <a href="https://jsfiddle.net/a6ktx5zv/" rel="nofollow noreferrer">https://jsfiddle.net/a6ktx5zv/</a></p>
  
  <pre><code>      &lt;!-- About US --&gt;
  
    &lt;section class="about-us"&gt;
      &lt;div class="about-us-img"&gt;
        &lt;img src="https://samikamal.github.io/Wild-Tiger-Restaurant/images/about-us.jpg" alt=""&gt;
      &lt;/div&gt;
  
      &lt;div class="about-us-text"&gt;
        &lt;h2&gt;Our Story&lt;/h2&gt;
  
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam, ipsum quis pharetra suscipit, &lt;br&gt; &lt;br&gt;  elit mi accumsan nisi, quis mollis mauris nisi nec augue. Sed molestie turpis efficitur gravida iaculis. Quisque tempor, nunc et tincidunt ultricies, nunc metus semper sapien, ut aliquet lorem mi id nisi. Duis luctus dui odio, et mattis ligula porta eu.&lt;/p&gt;
  
      &lt;/div&gt;
    &lt;/section&gt;
  
  /* About-Us */
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.about-us{
      height: 90vh;
      width: 100%;
  
  }
  
  .about-us-img{
      max-width: 50%;;
      height: 100%;
      overflow: hidden;
  
  
  }
  .about-us-img img{
      max-width: 100%; 
      display:block; 
      height: auto;
  }
  .about-us-text{
      max-width: 736px;
      text-align: center;
      margin-top: -47em;
      margin-right: 10em;
      float: right;
  }
  
  .about-us-text p{
      font-size: 2rem;
      line-height: 1.5
  }
  
  
  &lt;!-- Meals Photo's --&gt;
  </code></pre>