I need to locate the text that is framed in yellow, inside the photo, that is container-2. Even though I put:
.container-2 h3{
grid-column: 2 / 3;
grid-row: 2;
}
The h3 nor the paragraph move from place to inside the container-2. How could I fix it?
There are 4 equal grids. I attach the example of the first.
body{
background-color: #e6e6ed;
}
*{box-sizing: border-box}
.main{
display: grid;
grid-template-columns:42px 320px 37px 320px 83px;
grid-template-rows: 134px 319px 126px 486px 57px;
}
.main{
margin: 0 auto;
width: 802px;
}
.container-1{
grid-row: 1;
grid-column: 2 / 5;
}
.container-2{
grid-row: 2;
grid-column: 2 / 3;
}
.container-3{
grid-row: 2;
grid-column: 4 / 5;
}
.container-4{
grid-row: 3;
grid-column: 2 / 5;
}
.container-5{
grid-row: 4;
grid-column: 2 / 3;
background-color: #fff;
}
.container-6{
grid-row: 4;
grid-column: 4 / 5;
background-color: #fff;
}
a{
text-decoration: none;
}
.foto{
height: 590px;
width: 970px;
}
.container-2 h3 p{
grid-column: 2 / 3;
grid-row: 2;
}<main class="main">
<div class="container-1"><h2 class="titulo">Destacadas de la semana</h2></div>
<section class="container-2">
<img class=foto src="https://s13.postimg.org/r5md4u6kn/Screenshot-2018-1-2_Test.png">
<h3>Show</h3>
<p><span class="descripcion">#FuerzaNoha:<br/> famosos preocupados<br/>por el hijo mayor de<br/>Luisana</span></p>
</section>
</main>