Struggling to align 6 images in one row using bootstrap, but only getting 4 images with a large space between them. CSS isn't my strong suit.
Here's the HTML Code:
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.container-best
{
width:70%;
text-align:center;
margin: auto;
}
.best-rate
{
background-color: #ffd564;
text-align: center;
font: 20px 'aleobold', sans-serif;
color: #4c4145;
text-transform: uppercase;
padding-bottom: 25px;
padding-top: 26px;
position: relative;
}
</style>
</head>
<body>
<div class="container">
<div class="container-best">
<div class="best-rate">
☆☆☆☆☆☆☆Today Best Choice☆☆☆☆☆☆☆
</div>
</div>
<br />
<div class="row">
<div class="col-md-2 col-md-offset-1">
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/mercenaries.jpg">
</div>
<div class="col-md-2 col-md-offset-1" >
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/Narco-Valley.jpg">
</div>
<div class="col-md-2 col-md-offset-1" >
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/Vikingdom.jpg" >
</div>
<div class="col-md-2 col-md-offset-1" >
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/Red-Dirt-Rising.jpg" >
</div>
<div class="col-md-2 col-md-offset-1" >
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/At-All-Cost.jpg" >
</div>
<div class="col-md-2 col-md-offset-1" >
<img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/mercenaries.jpg" >
</div>
</div>
<div>
</body>
</html>
Have tried fixing it multiple times without success. Not sure what's causing the issue. Any help is appreciated.
Thanks!