Change
.stretch-2 {
width: 120%;
}
to
.stretch-2 {
width: 100%;
}
in your CSS.
Or, put this in your css:
body{
overflow-x:hidden;
}
题
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;
}
解决方案
Change
.stretch-2 {
width: 120%;
}
to
.stretch-2 {
width: 100%;
}
in your CSS.
Or, put this in your css:
body{
overflow-x:hidden;
}