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. Example of the picture In the container, there is a space on the right side which i marked with white zigzag mark. I got my css,

.flex-container {
    display: flex;
    padding-left: 12%;
    padding-right: 10%;
}

.flex-container > div {
    background-color: grey;
    padding-top: 2%;
    padding-left: 2%;
    padding-bottom: 2%;
    margin-top: 1em;
}

and my html,

<div >
  <div>
    <img width="70%" src="https://www.niagahoster.co.id/blog/wp-content/uploads/2019/11/10-Perbedaan-HTML-dan-HTML5-01.png">
    <h2>Belajar HTML dari Nol</h2>
    <p></p>
  </div>
</div>

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.

CodePudding user response：

Find the below changes in code. Width 100% for the image will resolve and have added the equal padding of 2% on all sides for the div element. Refer below link for changes

https://codepen.io/pen/

.flex-container {
    display: flex;
    padding-left: 12%;
    padding-right: 12%;
}

.flex-container > div {
    background-color: grey;
    padding: 2%;
    margin-top: 1em;
}
.flex-container > div > img{
  max-width: 100%
}

<div >
  <div>
    <img width="100%" src="https://www.niagahoster.co.id/blog/wp-content/uploads/2019/11/10-Perbedaan-HTML-dan-HTML5-01.png">
    <h2>Belajar HTML dari Nol</h2>
    <p></p>
  </div>
</div>