In a previous discussion about how padding is calculated when using percentages (%), it was mentioned that the padding is determined based on the parent element's width.
Now, I have come across the following CSS assignment:
.img_tutorial_full_width
{
background-color : #3E3E42;
margin : 0;
border : 0;
padding : 1%;
width : 99%;
}
When this CSS is applied to an <img> tag like below:
<img class="img_tutorial_full_width" src="../img/example.jpg"></img>
I would expect the container to stretch across the full width of the page since
margin + border = 0 + padding = 1% + content = 99% = 100%However, the browser displays scrollbars that grow wider as the window size increases. What could be the issue here?