My issue is that the sections floated to the right are overlapping with the wrapper. How can I prevent this from happening?
I also attempted to use the float property within the nth-child(odd/even) of the CSS, but it didn't work as expected. I would appreciate some guidance on how to achieve this so that I can eliminate the need for float classes.
http://codepen.io/anon/pen/bdoQPQ
body,
html {
font: 1em "Open Sans", sans-serif;
margin: 0px;
padding: 0px;
}
#wrapper {
padding: 0px 10px 0px 10px;
width: 100%;
}
.vertSection {
width: 75%;
height: 175px;
border-top: 1px solid black;
border-bottom: 1px solid black;
margin: 0px 0px 15px 0px;
padding: 5px 0px 0px 10px;
box-shadow: 0px 3px 5px #888, 0px -3px 5px #888;
display: inline-block;
}
.vertSection:nth-child(even) {
float: left;
}
.vertSection:nth-child(odd) {
float: right;
text-align: right;
}
.vertSection p {
text-align: left;
}
.vertSection img {
line-height: 75px;
}
.floatL {
float: left;
}
.floatR {
float: right;
}
.clear {
clear: both;
}<section id="wrapper">
<section>
<h1>Header</h1>
<p>This is where some information on my services would go.</p>
</section>
<section class="vertSection">
<img src="images/html5css3.png" class="floatL">
<h2>Heading</h2>
<p>A bunch of text and description here!</p>
</section>
<section class="vertSection">
<img src="images/responsive.png" class="floatR">
<h2>Heading</h2>
<p>A bunch of text and description here!</p>
</section>
<section class="vertSection">
<img src="images/search.jpg" class="floatL">
<h2>Heading</h2>
<p>A bunch of text and description here!</p>
</section>
<section class="vertSection">
<img src="images/communicate.png" class="floatR">
<h2>Heading</h2>
<p>A bunch of text and description here!.</p>
</section>
</section class="">