Encountering a rather peculiar issue here. It's worth mentioning that I am using Shopify, which has been known to cause some odd problems in the past.
Currently, I am working on this page for coding purposes (though not the final placement) -
On this page, there are a total of 6 divs, all set to span6 using Bootstrap. The first row of divs appears as expected, but starting from the second row, there seems to be an indentation issue that is proving difficult to remove. This indentation is causing the subsequent divs after the initial row to be pushed onto their own row since two cannot fit in one row due to the spacing.
If the size of all the divs is changed to span5, they can accommodate two on a single row; however, the indent persists starting from the second row.
Below is a snippet of the HTML code:
Kindly note that for brevity, only ONE of the SIX divs is provided below. The complete code consists of this segment repeated six times.
<div class="span6 majorimgtesting">
<a href="">
<div class="ghostrowforcategories span6"> <button class="ghostbuttonforcategories">TESTING</button> </div>
<img src="//cdn.shopify.com/s/files/1/0654/2811/products/clear-hammer-bubbler-water-pipe-stonedclassy_large.jpg?v=1422320684" class="imgtesting" />
<img src="//cdn.shopify.com/s/files/1/0654/2811/products/Micro-Mini-Water-Pipe-Stonedclassy_5571a18d-b3ed-457d-b180-f36cf3acb2b3_large.jpg?v=1423018550" class="imgtesting" />
</a>
And here is the accompanying CSS:
.majorimgtesting
{
max-height:250px;
overflow:hidden;
border-left: 1px solid black;
border-right: 1px solid black;
margin-bottom: 50px;
opacity: .9;
transition: .5s ease;
float: left;
}
.majorimgtesting:hover
{
transition: .5s ease;
opacity: 1;
}
.imgtesting
{
max-width: 50%;
display: block;
float: left;
z-index:-1;
}
.ghostrowforcategories
{
width: 100%;
position: absolute;
display: inline-block;
padding-bottom: 10px;
text-align: center;
}
.ghostbuttonforcategories
{
display: inline-block;
border-radius: 2px;
border: none;
height: 45px;
padding-left: 15px;
padding-right: 15px;
width: 100%;
background-color: #666105;
color: white;
border: 1px solid #666105;
float: middle;
z-index: 5;
opacity: .8;
}
.ghostbuttonforcategories:hover
{
background-color: #666105;
color: white;
z-index: 5;
}