I'm attempting to replicate elements from this particular website, however, I am encountering difficulties with the gallery section. The images on my version do not align as expected compared to the original site I am trying to mimic.
If it helps, here is a link to my code on JSFiddle.
Below is the CSS for the gallery section:
/* Gallery Start */
.box.style2 header {
display:inline-block;
background:#FFF;
padding:2em 3em;
margin:0px;
}
.box.style2 .inner {
position:relative;
padding:40px 0 0px 0;
}
.box.style2 {
text-align:center;
}
...
And this is the HTML:
<!-- Start of gallery -->
<article class="container box style2">
...
</div>
<!-- Gallery Images END -->
</article>
<!-- End of gallery -->
A screenshot of how my images are currently displayed is included below, demonstrating that they are not behaving correctly. This issue may be due to missing styles, but the specifics of these styles remain unclear even after research:
.row.\30 \25 > * {
padding: 0px 0 0 0px;
}
...
Upon reviewing wero's response, am I interpreting this information accurately?
.row.\30 \25 > * appears to refer to styling elements within a class named 0 and another one labeled 25 inside the row class. Am I correct in assuming that it then proceeds to apply styles to subsequent elements within that structure?