I feel like I'm losing my mind.
Currently, I am in the process of designing a section that consists of four photo boxes - two at the top and two below.
In order to achieve this layout, I have turned to utilizing Bootstrap.
Unfortunately, this particular section is causing chaos in my design, and I seem to be stuck without any solution. I simply cannot identify where the mistake lies.
It's worth noting that the boxes on the right side are not adhering to the width of the page as they should.
Although I've configured padding: 0; with Bootstrap, the issue still persists.
HTML:
<div class="row">
<div class="col-md-6">
<div class="booking-photo booking-1 wow bounceInLeft">
</div>
</div>
<div class="col-md-6">
<div class="booking-photo booking-1 wow bounceInLeft">
</div>
</div>
<div class="col-md-6">
<div class="booking-photo booking-1 wow bounceInLeft">
</div>
</div>
<div class="col-md-6">
<div class="booking-photo booking-1 wow bounceInLeft">
</div>
</div>
</div>
CSS:
.booking-2 {
background: #000;
position: relative;
z-index: 3;
}
.booking-2 .col-md-6 {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.booking-2 .booking-photo {
display: block;
height: 320px;
background-color: #373c40;
background-position: 0% 0%;
background-repeat: repeat;
background-attachment: scroll;
text-align: center;
text-decoration: none;
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
}
.booking-2 .booking-1 { background: url('../images/capa.png'); }
.booking-2 .booking-2 { background: url('../images/capa.png'); }
.booking-2 .booking-3 { background: url('../images/capa.png'); }
.booking-2 .booking-4 { background: url('../images/capa.png'); }