Currently experimenting with media queries and trying to make my tags span 100% the width of the device. However, I'm noticing a margin on the right side of my image. I suspect it's due to the padding on the div above, as when I set the padding to zero, the image spans the entire width of the device.
Here is how it appears with padding on the above div, showing extra space beside the image
And this is how it looks without padding on the above div, displaying no space beside the image
I aim to have padding on the above div but without any space beside the image.
Below is an example of the code within the media query section:
HTML:
<div class="paragraph">
<p>Vaporwave emerged as a music/art genre originating from online forums like Tumblr and Reddit in the early 2010s. Being online-born, it has a global presence like no other music genre before. Initially focused on 80's and 90's subculture aesthetics, influenced by glitch art, early digital graphics, roman artwork, tropical settings, Japanese culture, and nostalgic TV ads.</p>
</div>
<div class="image">
<img src="images/skull.jpg" alt="vaporwave skull image">
<p>Explore more <strong>vaporwave art</strong> <a href="vaporart.html">>here<</a></p>
</div>
CSS:
.paragraph {
color: white;
position: relative;
text-align: justify;
width: 100%;
margin: 0 auto;
border-radius: 0px;
padding: 10px;
font-size: .75em;
line-height: 1.5em;
background: rgba(215,189,234,0.75);
}
.image {
position: relative;
margin: 0 auto;
height: auto;
max-width: 100%;
}
Any insights into why padding could be resulting in a margin issue?