Can someone help me with an issue I'm having while using the Bootstrap Thumbnail grid system? My images are overlapping and I can't figure out why. I've attached an image for reference.
Whenever I hover over the images, the ones in the middle overlap. I'm not sure if I'm missing something obvious or if it's a default bootstrap behavior that I can't seem to fix.
https://i.sstatic.net/fT5Jq.jpg
HTML
<div class="top-header"class="page-header">
<h1>Smile Board</h1>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="./images/image01.png" alt="">
</a>
</div>
...Other image column elements...
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="./images/image04.png" alt="">
</a>
</div>
</div>
CSS
body {
font-family: 'Baloo Bhaina', cursive;
}
@media (min-width: 1200px)
.container {
width: 1170px;
}
h1 {
text-align: center;
}
.page-header {
background-color: #EFEC86;
padding-top: 20px;
width: 1130px;
}
.top-header {
width: 1130px;
background-color: #EFEC86;
padding-top: 20px;
width: 1290px;
}
.sub {
background-color: #EFEC86;
padding-top: 20px;
}
img {
width: 100%;
height: auto;
display: block;
overflow: auto;
}
.thumbnail {
width: 300px;
height: 300px;
overflow: auto;
max-width:calc(150% - 10px);
margin:0 16px;
}
.thumbnail:hover {
background-color: #EFEC86;
}
.row {
margin-right: 50px;
margin-left: -15px;
}