Width Of page Changing When Height Exceeds Viewable Area

Width Of page Changing When Height Exceeds Viewable Area

I made a website. When the body get longer than the page so that a scroll
bar will show up, the width changes. This confuses me. Is there some
automated setting that is doing this?
This is my css if u want to see it.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: center;
}
#cohenImage{
float:right;
margin-left:1em;
border: .2em solid #D3D3D3
}
.block {
display:block;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/*******************************************************************************
Theme Styles
*******************************************************************************/
body {
box-sizing: border-box;
color:#373737;
background: transparent;
font-family: 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
width: 70%;
margin-right:auto;
margin-left:auto;
padding: 3em;
background-image:url('../Cohen-Background.jpg');
background-color:#000000;
}
.inline{
display:inline;
}
.title {
margin: 0;
color: #fff;
font-size: 300%;
font-weight: 700;
text-shadow: #111 0px 0px 10px;
padding-top:.8em;
padding-bottom:.7em;
}
h1, h2, h3, h4, h5, h6 {
margin: 10px 0;
font-weight: 700;
color:#222222;
font-family:'Lucida Grande', 'Calibri', Helvetica, Arial, sans-serif;
letter-spacing: -1px;
}
h1 {
font-size: 250%;
font-weight: 700;
}
h2 {
padding-bottom: 10px;
font-size: 250%;
}
h3 {
font-size: 200%;
}
h4 {
font-size: 170%;
}
h5 {
font-size: 120%;
}
h6 {
font-size: 110%;
}
p {
font-size:105%;
}
b {
font-weight:bold;
}
footer p {
color: #f2f2f2;
}
ul.menu {
margin: 0;
padding: 0;
}
ul.menu {
height: 80px;
float:left;
}
ul.menu li {
list-style: none;
float:left;
height: 2em;
text-align: center;
background : -webkit-gradient(linear, left top, left bottom,
from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
background: -o-linear-gradient(top, rgb(100,170,255) 0%,rgb(69,69,69)
100%);
background: -ms-linear-gradient(top, rgb(100,170,255) 0%,rgb(69,69,69)
100%)
}
ul.menu li a {
display: block;
padding: 0 20px;
text-align: center;
line-height: 2em;
text-decoration:none;
background : -webkit-gradient(linear, left top, left bottom,
from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
background: -o-linear-gradient(top, rgb(168,168,168) 0%,rgb(69,69,69)
100%);
background: -ms-linear-gradient(top, rgb(168,168,168) 0%,rgb(69,69,69)
100%);
color:white;
font-weight:bold;
}
ul.menu li a:hover {
background: #919191;
}
ul li.active a{
background : #9E9E9E;
}
.wrapper {
width: 100%;
height: 2.1em;
background : #464646;
background : -webkit-gradient(linear, left top, left bottom,
from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
background: -o-linear-gradient(top, rgb(168,168,168) 0%,rgb(69,69,69)
100%);
background: -ms-linear-gradient(top, rgb(168,168,168) 0%,rgb(69,69,69)
100%)
position: relative;
}
.inner {
position: relative;
padding: 2em;
margin: 0 auto;
font-size:105%
}
.header{
background:rgba(0, 0, 0, 0.9);
border-top: .3em solid #2E2E2E;
border-left: .3em solid #2E2E2E;
border-right: .3em solid #2E2E2E;
border-top-left-radius: 1em;
border-top-right-radius: 1em;
text-align:center;
margin-right:auto;
margin-left:auto;
color:white;
}
#main_content_wrap {
background: #FCFCFC;
text-align:left;
padding:0;
margin:0;
}
#main_content {
padding-top: 3em;
}
#footer_wrap {
background:rgba(0, 0, 0, 0.9);
border-top: .3em solid #2E2E2E;
border-left: .3em solid #2E2E2E;
border-right: .3em solid #2E2E2E;
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
text-align:center;
margin-right:auto;
margin-left:auto;
color:white;
}
table {
background-color: #EEEEEE;
border: 2px solid #D4D4D4;
border-collapse: collapse;
padding-left: 2px;
}
thead {
color:black
}
th {
background-color: #D4D4D4;
padding-right: 4px;
}
tr, td, th {
border: 2px solid #D4D4D4;
padding-left: 4px;
}
dt {
font-weight: bold;
}
/*******************************************************************************
Small Device Styles
*******************************************************************************/
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
body{
width: 100%;
}
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
body{
width: 100%;
}
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
body{
width: 100%;
}
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
body{
width: 100%;
}
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
body{
width: 100%;
}
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
body{
width: 100%;
}
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
body{
width: 70%;
}
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
body{
width: 70%;
}
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
body{
width: 100%;
}
}