Width in new website >100%

Question

Hello I am curious as to if someone can help with this problem. I am creating a onepage design website. And the problem seems to be that in my css (strecth2 class). The header should be fixed and span the 100% of screen; however the stretch class is pushing the entire webpage to thr right by an additional 20%.

I am using foundation 5 and was trying to get 5 evenly spaced columns. Here's my HTML the described problem.

<div class="row">
    <div class="stretch-2">
        <div class="small-12 medium-4 large-2 columns">5</div>
        <div class="small-12 medium-4 large-2 columns">6</div>
        <div class="small-12 medium-4 large-2 columns">7</div>
        <div class="small-12 medium-4 large-2 columns">8</div>
        <div class="small-12 medium-4 large-2 columns end">9</div>     
    </div>
</div>

And my CSS:

.stretch-2 {
    width: 120%;
}

.row {
    max-width: 80em;
    padding-left: 2em;
    padding-right: 2em;
} 

And the Foundation 5 CSS:

.row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 62.5em;
  *zoom: 1; 
}

Answer 1

Change

.stretch-2 {
    width: 120%;
}

to

.stretch-2 {
    width: 100%;
}

in your CSS.

Or, put this in your css:

body{
  overflow-x:hidden;
}