I'm having some problems with the padding of my elements. I have these blocks and I want all of their children (the children are not from the the same element), except the first one to have right and left padding.
Here's my HTML and CSS:
.post-text {
background-color: white;
width: 62%;
margin: 0 3% 0 5.8%;
font-family: 'Verdana', sans-serif;
padding: 0 4%;
}
#image-title {
width: 100%;
padding: 0 0 3% 0;
}
.video-responsive{
width: 70%;
margin: 3% auto;
overflow:hidden;
padding-bottom:42%;
position:relative;
height:0;
}
.video-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}<div class="post-text">
<img id="image-title" src="https://1.bp.blogspot.com/-QCsheMmEwl8/VwZ2vrhiWEI/AAAAAAAACus/MaOdcewd47wh9hWT4EWr5X8SO06fOPj2w/s1600/bebidas-em-russo.png" alt="imagem ilustrativa de título" title="título do post">
<h2>título do 1º post</h2>
<p>Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum</p>
<audio controls>
<source src="C:\Users\vanes\Music\Classical Drumming\05 Flight of the Bumblebee.mp3" type="audio/mp3">
</audio>
<p>Este é um parágrafo comum Este é um parágrafo comum Este é um <span>parágrafo</span> comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum</p>
<blockquote>Esta é uma CITAÇÃO comum Esta é uma CITAÇÃO comum Esta é uma CITAÇÃO comum Esta é uma CITAÇÃO comum Esta é uma CITAÇÃO comum Esta é uma CITAÇÃO comum Esta é uma CITAÇÃO comum.</blockquote>
<p>Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum</p>
<div class="video-responsive">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/da4wIEIeHg4?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<p>Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum</p>
<h3>subtítulo</h3>
<p>Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum</p>
<div class= "post-footer">
<p class="post-footer">tags</p>
<p id= "post-footer-right" class="post-footer">botões</p>
</div>
</div>Here's the jsfiddle link: https://jsfiddle.net/vanessaddiniz/L81ekzmp/
I want the image to take the full width, without the right and left bottom. What's the best way to do this?
From what I understood, this JSFiddle might hold the solution to your problem.
I've added padding to the elements you wanted to move and set the body to absolute.
p, h2, h3{
padding-left:4%;
padding-right:4%;
}