I am facing an issue with reducing the space between 3 col-md-4 elements in my code. I attempted to decrease the margin between them while adjusting the padding on the first and last columns. However, this solution resulted in the image columns becoming misaligned when manipulating the window size due to the increased padding.
Here is the HTML:
<div class="cards">
<div class="container">
<h2>
Our Expertise.
</h2>
</div>
<div class="row">
<div class="col-md-4">
<!-- <img> -->
<!-- <img> -->
<!-- <img> -->
</div>
<div class="col-md-4">
<!-- <img> -->
<!-- <img> -->
<!-- <img> -->
</div>
<div class="col-md-4">
<!-- <img> -->
<!-- <img> -->
<!-- <img> -->
<!-- <img> -->
</div>
</div>
</div>
And here is the CSS:
html, body {
margin: 0;
padding: 0;
font-family: 'Libre Baskerville', sans-serif;
}
.first {
padding-left: 200px !important;
}
.last {
padding-right: 200px !important;
}
.container {
max-width: 980px;
margin: 0 auto;
}
.header {
padding-top: 20px;
}
.header h1 {
font-size: 20px;
}
.nav li {
margin: 0px;
border: 0px;
}
.nav li a {
color: #333;
}
.jumbotron {
background-color: transparent;
padding-top: 100px;
padding-bottom: 100px;
}
.jumbotron h2 {
font-size: 50px;
}
.jumbotron h2 span {
color: #ffc200;
}
.banner {
background-color: #333;
height: 140px;
color: white;
text-align: center;
padding-top: 30px;
}
.cards {
background-color: #FFC200;
text-align: center;
}
.cards img {
margin-bottom: 25px;
padding: auto;
}
.cards h2 {
margin-top: 20px;
margin-bottom: 80px;
}
@media (max-width: 992px) {
.col-md-4 {
margin: 0 auto 0;
text-align: center;
width: 100%;
}
.cards img {
width: 60%;
}
}
@media (max-width: 500px) {
.header h1 {
text-align: center;
}
.nav li {
text-align: center;
width: 100%;
}
.cards img {
width: 100%;
}
}
Unfortunately, I am unable to include images in the columns due to not having enough reputation points to post them.