title: Image is going Outside of Bootstrap Grid and less Responsive
body: <p>Hello im building my website with bootstrap 4 and while using the grid system I noticed the image goes outside of the grid system a little. (Screenshot below) Because of this in ipad mode everything looks too close together. I know I can add some media queries but I thought the whole point of bootstrap grid is to make everything responsive automatically without having to use media queries.</p>
  <p>Screenshot and Code Below but you can also see it live here <a href="http://vdfml.com.s3-website-us-east-1.amazonaws.com/index.html" rel="nofollow noreferrer">http://vdfml.com.s3-website-us-east-1.amazonaws.com/index.html</a></p>
  <p><a href="https://i.stack.imgur.com/Z2ItA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z2ItA.jpg" alt="enter image description here" /></a></p>
  <pre><code>&lt;header id=&quot;showcase&quot;&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;!-- girl --&gt;
        &lt;div class=&quot;girl-container col-sm-12 col-md-5 .col-lg-6&quot;&gt;
          &lt;img src=&quot;img/french_girl.png&quot; class=&quot;girl&quot; alt=&quot;&quot; /&gt;
        &lt;/div&gt;
        &lt;!-- text --&gt;
        &lt;div class=&quot;text-container col-sm-12 col-md-7 .col-lg-6&quot;&gt;
          &lt;h1 class=&quot;&quot;&gt;
            Authentic, European-Inspired &lt;br /&gt;
            Bakery Goods
          &lt;/h1&gt;
          &lt;button type=&quot;button&quot; class=&quot;btn btn-light&quot;&gt;Order Online&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;overlay&quot;&gt;&lt;/div&gt;
      &lt;!-- &lt;/div&gt; --&gt;
      &lt;!-- BOTTOM CURVE --&gt;
  
      &lt;div class=&quot;bottom-curve&quot;&gt;
        &lt;svg
          id=&quot;Layer_1&quot;
          data-name=&quot;Layer 1&quot;
          xmlns=&quot;http://www.w3.org/2000/svg&quot;
          viewBox=&quot;0 0 1334.16 101.52&quot;
        &gt;
          &lt;defs&gt;
            &lt;style&gt;
              .cls-1 {
                fill: #fff;
                fill-rule: evenodd;
              }
            &lt;/style&gt;
          &lt;/defs&gt;
          &lt;path
            class=&quot;cls-1&quot;
            d=&quot;M-24.49,42.52C41.88,62.86,318.79,98.6,665.09,41S1231.94-18.55,1309,67.66v33.87H-25.2S-24.49,94.72-24.49,42.52Z&quot;
            transform=&quot;translate(25.2 -0.01)&quot;
          &gt;&lt;/path&gt;
        &lt;/svg&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- BOTTOM CURVE --&gt;
  &lt;/header&gt;
  
  CSS
  
  
      #showcase .row {
          height: 100%;
          justify-content: center;
          /* padding: 0 10rem; */
          position: relative;
          z-index: 2;
      }
  
      #showcase .girl-container {
          position: relative;
          display: flex;
          justify-content: center;
      }
  
      #showcase .girl{
          position: absolute;
          bottom: 0;
          height: 80%;
          /* width: 35rem; */
  
  
      }
  
      #showcase .text-container {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      }
  
      #showcase .text-container h1 {
      font-family: 'Cookie', cursive;
      color: #ee3844;
      text-align: center;
      font-size: 4.5rem;
      line-height: 1;
      /* white-space: nowrap; */
      text-shadow: 
      1px  1px     #fff, 
      -1px  1px     #fff, 
      1px -1px     #fff, 
      -1px -1px     #fff,
      1px  1px 5px #555;
      margin-bottom: 1rem;
      }
  </code></pre>