title: HTML Flex Container Space
body: <p>In my recent work on HTML5 and CSS (Still studying both), i have some problem on doing the flex-container part. So, i try to put my image on the container but then this happend.
  <a href="https://i.stack.imgur.com/ecgZv.png" rel="nofollow noreferrer">Example of the picture</a>
  In the container, there is a space on the right side which i marked with white zigzag mark.
  I got my css,</p>
  <pre><code>.flex-container {
      display: flex;
      padding-left: 12%;
      padding-right: 10%;
  }
  
  .flex-container &gt; div {
      background-color: grey;
      padding-top: 2%;
      padding-left: 2%;
      padding-bottom: 2%;
      margin-top: 1em;
  }
  </code></pre>
  <p>and my html,</p>
  <pre><code>&lt;div class=&quot;flex-container&quot;&gt;
    &lt;div&gt;
      &lt;img width=&quot;70%&quot; src=&quot;https://www.niagahoster.co.id/blog/wp-content/uploads/2019/11/10-Perbedaan-HTML-dan-HTML5-01.png&quot;&gt;
      &lt;h2&gt;Belajar HTML dari Nol&lt;/h2&gt;
      &lt;p&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I try to find where the problem is, but i can't find it. Does anyone know where the problem is? It's such a big thanks if you can helped me.</p>