Prevent float right sections overlap the wrapper - html

Question

I have every other section floated a different direction but the sections that are floated right overlap the wrapper. How do I get it to not do that?
Also, I tried incorporating the float into the nth-child (odd/even) of the css and I couldn't get it to work right. If someone can help me do that so I can get rid of the float classes I would be grateful.
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="">

Answer 1

The problem is likely related to this part.
#wrapper {
padding: 0px 10px 0px 10px; /*top right bottom left*/
width: 100%;
}
So 100% + 10px + 10px causes the overflow, remove width:100% it should all good. By the way, it's safer to also set section {display:block;} in case some browsers don't render it as block level element.