My issue is with the positioning of the first DIV in my container. Even though it should be styled using :first-of-type, it's not appearing as expected.
This problem arises after inserting
<div class="horizontal_line"></div>
right before the first instance of
<div class="field_container">
<div class="field_icon"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse luctus eget lectus at convallis.</p>
</div>
the icon suddenly disappears and the entire dive shifts down, losing its first-of-type styling.
I want it to appear like this: IMAGE
View the jsFiddle for my page
This affects the common style across all boxes, as well as the specific style for the first one
.field_container
{
width: 216px;
margin-left: 28px;
display: inline-block;
float: left;
text-align: justify;
}
.field_container .field_icon
{
height: 80px;
margin: 0 auto;
background-repeat: no-repeat;
}
.field_container:first-of-type
{
margin-left: 0px;
}
.field_container:first-of-type .field_icon
{
background-image: url('images/front_end.png');
width: 83px;
}
and the style of the horizontal line that is causing the issue
.horizontal_line
{
width: 100%;
margin: 25px 0px 25px 0px;
height: 1px;
clear: both;
background: #1C788B;
}