主頁右側的空白區

Question

我的網頁在主頁的右側顯示一個巨大的白色（空白）空間。如果您轉到該頁面，則會出現水平滾動條（在所有瀏覽器中）。我無法弄清楚這是由什麼引起的。

- 編輯--- 我的網站的CSS：

@charset "utf-8"; 


body { margin:0; padding:0; color:#000000; font:normal 14.5px Open Sans, Helvetica, sans-serif; background:#ffffff;} 
.footer {width: 100%;} 
.main, .content, .html, .info, .info2 {padding:0; margin:0 auto; width:1000px;} 
.content {border-radius: 5px; -moz-border-radius:5px; -webkit-border-radius:5px;} 

.info { width: 570px; float: left; padding: 0px 10px; text-align: justify;} 

.info2 { width: 970px;text-align: justify;} 
.info2 .info2header { padding: 0px 0px 5px 0px; width: 970px;} 

.info2 .bullet {padding: 5px 0px 0px 20px; font: normal 15px Open Sans, Helvetica, sans-serif; color: #000000;} 

.info3 {width: 650px; float: left; padding: 0px 10px;} 

.info4 {width: 100%; padding: 10px 0px 0px 0px;} 
.info5 {float: left; padding: 0px 10px;} 
.logo { width:320px; height:96px; padding:0; margin:0 auto; float:left;} 
h1 a, h1 a:hover { color:#636363; text-decoration:none;} 
h1 span { color:#78bbe6;} 
h1 small { padding:0 10px; font:normal 12px Open Sans, Helvetica, sans-serif;letter-spacing:normal;} 
h2 { font:normal 26px Open Sans, Helvetica, sans-serif; font-weight: 350; padding:8px 0; margin:0; color:#595959;} 
h3 { font:normal 26px Open Sans, Helvetica, sans-serif; padding:8px 0; margin:0; color:#ffffff;} 
h4 { padding: 5px 0px 0px 25px; margin: 0; font: normal 13px Open Sans, Helvetica, sans-serif; text-align: left; } 
h4 img:hover {filter: alpha(opacity=80); opacity:0.80; -moz-opacity: 0.80; } 
h5 {font: normal 26px Open Sans, Helvetica, sans-serif; line-height: 60px;font-weight: 350; margin: 10px 0px 0px 0px; color: #ffffff;} 

p{padding: 24px 15px 0px 18px; margin: 0; color: #000000; font: normal 14px Open Sans, Helvetica, sans-serif; text-align: justify; } 

h6 {padding: 0px 0px 20px 25px; margin: 0;font:normal 17px Open Sans, Helvetica, sans-serif; text-align: left; font-weight: 300;} 
h6 a{font:normal 17px Open Sans, Helvetica, sans-serif; } 
h6 a:hover{font-weight: bold;} 
h7 { font:normal 34px Open Sans, Helvetica, sans-serif; font-weight: 350; padding:0; margin:0; color:#000000;} 
h8 {color: #000000; font: normal 13px Open Sans, Helvetica, sans-serif; text-align: justify;} 
h9 {color: #ffffff; font: normal 22px Open Sans, Helvetica, sans-serif;padding:4px 0; margin:0; } 
a { color:#66ccff; font:normal 14.5px Open Sans, Helvetica, sans-serif; text-decoration: none;} 

a:hover { text-decoration: none; font-weight: bold;} 
.header, ul,.content .sidebar { margin:0; padding:0;} 


/* header */ 
.header { padding:0 0 125px;} 
.header_resize { margin:0 auto; width:970px; } 


/* menu */ 

.menu_nav ul ul {display: none;} 

.menu_nav ul li:hover a { color:#ffffff; text-decoration:none; background:#d00000;} 

.menu_nav ul li:hover > ul {display: block;} 

.menu_nav ul { position: relative; display: inline-table; list-style: none; padding: 25px 0px; float:right;} 

.menu_nav ul:after {content: ""; clear: both; display: block;} 

.menu_nav ul li { float:left;} 

.menu_nav ul li a { border-radius: 5px; -moz-border-radius:5px; -webkit-border-radius:5px; display: block; padding: 16px 20px;color: #000000; text-decoration:none; font-size:14px; line-height:15px; font-weight:400;} 

.menu_nav ul li.active a {color:#ffffff; text-decoration:none; background:#d00000;} 

.menu_nav ul li a:hover { color:#ffffff; text-decoration:none; background:#d00000;} 

.menu_nav ul ul {background: #d00000; padding: 0; border-radius: 5px; position: absolute;border-color: #b80000; border-width: thin;} 

.menu_nav ul ul li {height: auto; border-style: solid; border-radius: 5px; border-color: #b80000; border-width: thin;float: none; position: relative; z-index: 1000;} 

.menu_nav ul ul li a:hover {background: #a00000;} 

.menu_nav ul ul li a {padding: 15px 15px 15px 15px; color: #ffffff;}  

.menu_nav ul ul ul {position: absolute; left:100%; top:0; width: 180px;} 

.menu_nav ul ul ul li a:hover {background: #a00000;} 



/* content */ 
.content {background:#fff;} 

.mainbar {padding: 0px 0px 0px 0px;float:left; width:630px;} 

.mainbar .ribbon {float:left;} 

.mainbar img:hover {filter: alpha(opacity=80); opacity:0.8; -moz-opacity: 0.8; } 


.mainbar3 {padding: 51px 0px 0px 0px; float:left; width:630px; } 

.mainbar3 .ribbon{float:left;} 

.sidebar {float: right; width:330px; padding: 0px 0px 0px 0px;} 
.sidebar a {color: #ffffff;} 

.sidebar2 {float: right; padding: 50px 0px 0px 0px; width: 330px; height: 600px;} 

.sidebar2 .ribbon {float:right;} 

.sidebar .table {background: #707070; text-align: center; color: #ffffff; width: 325px; height: 480px;background: linear-gradient(top, #707070 0%, #262626 100%);border-radius: 2px 2px 0 0;box-shadow: 0 1px 2px rgba(0,0,0,0.3);} 

.sidebar::before {left: 0;} 

.sidebar::after {right: 0;} 

hr.gray{height: 1px;border: 0;color: #E0E0E0;background-color: #E0E0E0;} 

.info2 .product {transform: scale(0.90);border-style:solid; border-width: 1px; border-color: #EEEEEE; border-radius: 10px; background: #ffffff; transition: all .3s ease-in-out;} 
.info2 .product:hover {transform: scale(1.0);} 
.info2 .divlink {font-size: 12px; color: #000000;} 
.info2 .divlink:hover {font-weight: normal;} 


.info2 .box1 {width: 465px; height: 200px; float: left; padding: 25px 0px 0px 0px; } 

.info2 .box2 {width: 465px; height: 179px; float: right; padding: 25px 0px 20px 0px;} 

.info2 .box3 {width: 465px; height: 200px; float: left; padding: 25px 0px 20px 0px;} 

.info2 .box4 {width: 465px; height: 199px; float: right; padding: 25px 0px 20px 0px;} 

.info2 .box5 {width: 465px; height: 200px; float: left; padding: 25px 0px 20px 0px;} 

.info2 .box6 {width: 475px; height: 40px; float: left; padding: 0px 0px 20px 0px;} 

.info2 .box7 {width: 475px; height: 40px; float: right; padding: 0px 0px 20px 0px;} 

.info2 .rd {text-align: justify;} 

.bullet { width: 433px; height: 170px; background: #F6CECE; margin-left: auto; margin-right:auto;} 

.bullet2 {background: #ffffff; margin: 0;} 
.map {float: right;} 
.contactbar {float:right; width: 305px; background: #707070;text-align: center; color: #ffffff; height: 525px; background: linear-gradient(top, #707070 0%, #262626 100%);border-radius: 2px 2px 0 0;box-shadow: 0 1px 2px rgba(0,0,0,0.3);} 
.contactbar a {color: #ffffff;} 

#submit {font: 14px Open Sans, Helvetica, sans-serif; border-radius: 5px; padding: 0; border-width: thin; cursor: pointer; background-color: #e8e8e8;} 
#reset {font: 14px Open Sans, Helvetica, sans-serif; border-radius: 5px; padding: 0; border-width: thin; cursor: pointer; background-color: #e8e8e8;} 


<--ribbon for mainbar ---> 

.mainbar .ribbon { width: 630px; position: relative;color: #444; background: #fff; border: 1px solid #d2d2d2; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.1)} 

.mainbar .ribbon h2 {display: block;height: 30px;line-height: 1.3;text-align: center;width: 630px;position: relative;top: 8px;color: #ffffff;text-shadow: 0 1px 1px #111;border-top: 1px solid #b00000;border-bottom: 1px solid #c80000;background: #d00000;background: linear-gradient(top, #e00000 0%, #262626 100%);border-radius: 2px 2px 0 0;box-shadow: 0 1px 2px rgba(0,0,0,0.3);} 

.mainbar .ribbon h2::before,.mainbar .ribbon h2::after {content: '';display: block;width: 0;height: 0;position: absolute;bottom: -11px;z-index: -10;border: 5px solid;border-color: #242424 transparent transparent transparent;} 

.ribbon h2::before {left: 0;} 

.ribbon h2::after {right: 0;} 


<--ribbon for mainbar3---> 

.mainbar3 .ribbon { width: 630px; position: relative;color: #444; background: #fff; border: 1px solid #d2d2d2; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.1)} 

.mainbar3 .ribbon h3 {display: block;height: 30px;line-height: 1.3;text-align: center;width: 630px;position: relative;top: 8px;color: #ffffff;text-shadow: 0 1px 1px #111;border-top: 1px solid #b00000;border-bottom: 1px solid #c80000;background: #d00000;background: linear-gradient(top, #e00000 0%, #262626 100%);border-radius: 2px 2px 0 0;box-shadow: 0 1px 2px rgba(0,0,0,0.3);} 

.mainbar3 .ribbon h3::before,.mainbar3 .ribbon h3::after {content: '';display: block;width: 0;height: 0;position: absolute;bottom: -11px;z-index: -10;border: 5px solid;border-color: #242424 transparent transparent transparent;} 
.ribbon h3::before {left: 0;} 

.ribbon h3::after {right: 0;} 



<--ribbon for sidebar2---> 

.sidebar2 .ribbon {width: 330px; position: relative;color: #444; background: #fff; border: 1px solid #d2d2d2; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.1)} 

.sidebar2 .ribbon h2{display: block;height: 30px;line-height: 1.3;text-align: center;width: 330px;position: relative;top: 8px;color: #ffffff;text-shadow: 0 1px 1px #111;border-top: 1px solid #b00000;border-bottom: 1px solid #c80000;background: #d00000;background: linear-gradient(top, #e00000 0%, #262626 100%);border-radius: 2px 2px 0 0;box-shadow: 0 1px 2px rgba(0,0,0,0.3);} 

.sidebar2 .ribbon h2::before,.sidebar2 .ribbon h2::after {content: '';display: block;width: 0;height: 0;position: absolute;bottom: -11px;z-index: -10;border: 5px solid;border-color: #242424 transparent transparent transparent;} 



<--ribbon for info2 ---> 

h9 { width: 465px; position: relative;color: #444; background: #fff; border: 1px solid #d2d2d2; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.1)} 

h9 {display: block;height: 30px;line-height: 1.3;text-align: center;width: 465px;top: 8px;position: relative;color: #ffffff;text-shadow: 0 1px 1px #111;border-top: 1px solid #b00000;border-bottom: 1px solid #c80000;background: #d00000;background: linear-gradient(top, #e00000 0%, #262626 100%);border-radius: 2px 2px 0 0;box-shadow: 0 1px 2px rgba(0,0,0,0.3);} 

h9::before, h9::after {content: '';display: block;width: 0;height: 0;position: absolute;bottom: -11px;z-index: -10;border: 5px solid;border-color: #242424 transparent transparent transparent;} 

h9::before {left: 0;} 

h9::after {right: 0;} 

/*tabs*/ 
.tabs { 
    position: relative; 
    min-height: 480px; 
    clear: both; 
    margin: 35px 0; 
} 
.tabs1 { 
    position: relative; 
    min-height: 580px; 
    clear: both; 
    margin: 35px 0; 
} 
.tab { 
    float: left; 
} 
.tab label { 
    background: #eee; 
    padding: 10px 30px 10px 30px; 
    border: 1px solid #ccc; 
    margin-left: -1px; 
    position: relative; 
left: 15px; 
} 

.tab [type=radio] { 
    display: none; 
} 
.tabcontent { 
    position: absolute; 
    background: #ffffff; 
    top: 29px; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    padding: 20px; 
    border: 1px solid #ccc; 
} 
.tabcontent img{ 
    position: absolute; 
    z-index: 1;} 
.tabcontent b{ 
    font-size: 16px; 
} 

.tabcontent span{ 
    padding: 1.5px; 
    size: 1px; 
} 
.tabcontent span1{ 
    font-style: bold; 
    padding: 10px; 
    } 
[type=radio]:checked ~ label { 
    background: white; 
    border-bottom: 1px solid white; 
    z-index: 2; 
} 
[type=radio]:checked ~ label ~ .tabcontent { 
    z-index: 1; 
} 


/* footer */ 
.footer { } 
.footer_resize {margin: 1500px 0px 0px 0px; width:100%;} 
.footer_resize1 {margin: 300px 0px 0px 0px; width:100%;} 
.footer_resize2 {margin: 900px 0px 0px 0px; width:100%;} 
.footer_resize3 {margin: 400px 0px 0px 0px; width:100%;} 
.footer_resize4 {margin: 200px 0px 0px 0px; width:100%;} 
.footer_resize5 {margin: 500px 0px 0px 0px; width:100%;} 
.footer p {background: #d00000; color: #ffffff; padding:4px 0px 0px 30px; width: 100%; font: 12px Open Sans, Helvetica, sans-serif;line-height:1.5em;} 
.footer p a { color: #ffffff; } 




.fr { float:right;} 
.clr { clear:both; padding:4px; margin:0; width:1000px; font-size:0px; line-height:0px;} 

Answer 1

你有這個元素.clr引起該問題，你有1000像素寬度，設置width:auto。元素在sidebar上。在頁腳你有一個width:100%與padding，你需要設置box-sizing: border-box與padding內

CSS設置的100％

.clr { 
    clear: both; 
    font-size: 0; 
    line-height: 0; 
    margin: 0; 
    padding: 4px; 
    width: auto; /* Set this rule */ 
} 

.footer p { 
    background: #d00000 none repeat scroll 0 0; 
    box-sizing: border-box; /* Set this rule */ 
    color: #ffffff; 
    font: 12px/1.5em Open Sans,Helvetica,sans-serif; 
    padding: 4px 0 0 30px; 
    width: 100%; 
} 

HTML

<div class="sidebar"> 
     <div class="table"> 
     <h5>Connect With Us</h5> 

     <h4>E-mail:</h4><h6><a href="mailto:info@oranoxis.com">info@oranoxis.com</a></h6><div class="clr"></div>  
     <h4>Tel:</h4><h6>(800) 559 - 2490<br>(858) 622 - 1958</h6> 

     <div class="clr"></div> --> HERE IS THE PROBLEM 

     <h4>Address:</h4><div class="clr"></div> 
     <h6>6650 Lusk Blvd. Suite B108<br> 
     San Diego, CA 92121 <br> 
     USA</h6><div class="clr"></div> 
     <h4>Social Networks:<br>  
     <a href="https://plus.google.com/110896334542791955681/posts"><img width="50px" align="left" height="auto" style="padding: 20px 0px 0px 5px;" alt="googleplus" src="images/gp2.png"></a> 
     <a href="https://www.youtube.com/user/Oranoxis"><img width="50px" align="left" height="auto" style="padding: 20px 0px 0px 20px;" alt="youtube" src="images/yt2.png"></a> 

     <a href="https://www.linkedin.com/company/oranoxis-inc."><img width="50px" align="left" height="auto" style="padding: 20px 0px 0px 20px;" alt="linkedin" src="images/li2.png"></a> 
     <a href="https://www.facebook.com/pages/Oranoxis-Inc/182983198390230"><img width="50px" align="left" height="auto" style="padding: 20px 0px 0px 20px;" alt="facebook" src="images/fb2.png"></a> 
     </h4> 

     </div></div> 

Answer 2

這是因爲div與類clr它有一個width的1000px。這就是爲什麼有空間