Text flows out of divs when scaling to mobile - html

Question

The layout I made needs to be visible on mobile screens. Currently when I scale down to mobile or view the site on my iPhone 5 the divs with longer text in them just go all over the place.
Since I wrap everything in divs that I call section0, section1 etc etc, I thought setting the height for these would help, but this doesn't help. The background changes but the text that overflows just stays where it is. In the sections are page containers but setting height to these doesn't help either.
I'm a bit clueless here as this problem only happens with the bottom 3 divs.
My sections are built up like this;
<div class="section" id="section3">
<div class="row">
<div class="col-lg-6 werkwijze">
<h1>Lorem Psum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
<h1>Lorem Psum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
</div>
</div> <!-- end col -->
</div> <!-- end row -->
<div class="row">
<div class="col-lg-5 botlogo">
<div class="left"><img src="css/images/logo4.png"></div><div class="right"><h3>LOREM IPSUM</h3><h4>dolor sit amet</h4></div>
</div><!-- end col -->
</div> <!-- end row -->
</div> <!-- end sec -->
And I use these styles for the sections;
.page_container {
height:100% !important;
display:block;
}
#section3{
background: none;
border-bottom: 2px solid #8f8f8f;
height:100%;
}
There are 6 sections (0-5) and it starts to go wrong at section 3.
I tried to add a fiddle but for some reason I can't recreate the problem and I can not share the original website. http://jsfiddle.net/MgcDU/ I hope someone recognises this problem and can help me.

Answer 1

Based on the code snippet that you posted, you have an extra </div> in there that might be causing your problem (I put an arrow to it below):
<div class="section" id="section3">
<div class="row">
<div class="col-lg-6 werkwijze">
<h1>Lorem Psum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
<h1>Lorem Psum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
</div> <------------------------- This one seems like an extra
</div> <!-- end col -->
</div> <!-- end row -->
<div class="row">
<div class="col-lg-5 botlogo">
<div class="left"><img src="css/images/logo4.png"></div><div class="right"><h3>LOREM IPSUM</h3><h4>dolor sit amet</h4></div>
</div><!-- end col -->
</div> <!-- end row -->
</div> <!-- end sec -->