title: Issue with responsive content, content going out of the container
body: <p>I defined a viewport of:</p>
  
  <pre><code>  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  </code></pre>
  
  <p>This is the html and body style:</p>
  
  <pre><code> html, body {
  box-sizing: border-box;
    }
  </code></pre>
  
  <p>My problem is that in some screen size the content going out of the container and doesn't fit the screen, like the following example:</p>
  
  <p><a href="https://i.stack.imgur.com/DQhEh.png" rel="nofollow noreferrer">example</a></p>
  
  <p>full code is here:
  <a href="https://jsfiddle.net/roniitzhaik/34678bq2/1/" rel="nofollow noreferrer">https://jsfiddle.net/roniitzhaik/34678bq2/1/</a></p>