iPhone Orientation issue on Bootstrap - html

Question

I have been designing a responsive website and i have come across this issue.
Firstly, changing from portrait mode to landscape didn't trigger any responsive reactions. It just zoomed into the website. I ensured this doesn't happen with:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
However, when the user change back to portrait mode, a white space appears on the right. Here is a screenshot.
Here is part of the code of the container.
<div class="about">
<div class="container">
<div class="row">
<div class="span12">
<div class="headlines"><h1>Hello..</h1></div>
<div class="row">
<div class="span6">
<p>
Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
</p>
<p>
Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
</p>
</div>
<div class="span6">
<p>
Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
</p>
</div>
</div>
<hr class="soften"/>
<div class="about-hire">
<h3 >Hello?</h3>Let's talk!
</div>
</div>
</div>
</div>
</div>
and this is the corresponding CSS.
.about {
text-align: center;
padding: 100px 0 100px 0;
background-color: #fff;
}
.about .container {
position: relative;
z-index: 9;
}
#media (max-width: 767px) {
.about {
margin-left: -20px;
margin-right: -20px;
}
.about .container {
margin-left: 20px;
margin-right: 20px;
}
}
Any help is greatly appreciated.

Answer 1

I can think of 2 things here:
1.
the scale should be this:
<meta name="viewport" content="width=device-width, initial-scale=1">
2.
Could be your dimensions states...
Add this on your body tag if you don't have it... in your master css:
body {min-width: 100%;}
If you want to be specific you can start with this:
body {min-width: 1024px;}
then add your media code appropiately as desire. Example:
#media only screen and ( max-width: 640px) {blah}
:)