当前位置: 动力学知识库 > 问答 > 编程问答 >

Why does my 100% width in CSS HTML create a horizontal scroll bar even though I made padding and margins 0?

问题描述:

For some reason my CSS results in a horizontal scroll bar even thought there is zero padding and margins and I have made no CSS changes in my HTML. I have read through a lot of different articles but most of them just say to get rid of margins and padding but I looked through my code multiple times and could not find any margins or padding that would cause this. Please help:

 @font-face {

font-family: 'MYRIADPROREGULAR';

src: url('fonts/MYRIADPROREGULAR.eot');

src: local('MYRIADPROREGULAR'),

url('fonts/MYRIADPROREGULAR.woff') format('woff'),

url('fonts/MYRIADPROREGULAR.ttf') format('truetype');

}

/* use this class to attach this font to any element i.e. <p class="fontsforweb_fontid_4410">Text with this font applied</p> */

.fontsforweb_fontid_4410 {

font-family: 'MYRIADPROREGULAR' !important;

}

*{

margin:0px;

padding:0px;

}

body{

background:#55b14a;

}

.container{

width:100%;

margin:auto;

font-family: 'MYRIADPROREGULAR' ;

font-weight: 250;

}

.container h1{

width:95%;

float:left;

color: #000;

font-size: 28px;

font-weight: normal;

margin-top:10px;

margin-left:-20px;

margin-bottom:-10px;

}

.container h4{

width:85%;

float:left;

font-size:17px;

margin-bottom: 20px;

margin-left:-15px;

}

.center_box{

background:#55b14a;

width:80%;

margin-top:35px;

margin-left:10px;

margin-right:10px;

display:block;

}

.center_box ul li{

float:left;

width:52px;

height:52px;

display:block;

}

.clear{

clear:both;

}

.use_coupon{

display:block;

width:130px;

height:26px;

line-height:26px;

}

.use_coupon a{

text-align:center;

}

.container h4{

margin-top: 24px;

font-size: 18px;

font-weight: 50;

}

/* SQUARED FOUR */

/*

.squaredFour {

width: 20px;

margin: 20px auto;

position: relative;

}

*/

.squaredFour label {

cursor: pointer;

position: absolute;

width:52px;

height:52px;

/*

width: 20px;

height: 20px;

top: 0;

border-radius: 4px;

-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);

-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);

box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);

*/

background:url('images/checkbox_bg.png');

/*

background: #fcfff4;

background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );

*/

}

.squaredFour label:after {

/*

// -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

// filter: alpha(opacity=0);

*/

opacity: 0;

content: '';

position: absolute;

/*background: transparent;*/

top: -15px;

left: 4px;

border: none;

width: 47px;

height: 60px;

/*

* width: 9px;

height: 5px;

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

transform: rotate(-45deg);

*/

}

/*

.squaredFour label:hover::after {

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";

filter: alpha(opacity=30);

opacity: 0.5;

}

*/

.squaredFour input[type=checkbox]:checked + label:after {

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

filter: alpha(opacity=100);

opacity: 1;

background:url('images/right.png');

}

.squaredFour .style_check {

display:none;

}

/* changes :: 16-05-2015 */

.use_coupon{

background:#A6A6A6;

border:1px solid #555;

width:130px;

height:26px;

line-height:26px;

text-align:center;

margin:21px auto 18px;

}

.use_coupon a{

font-size:11px;

text-decoration:none;

color:#000;

text-align:center;

}

h4.using_times{

font-size:18px;

}

分享给朋友:
您可能感兴趣的文章:
随机阅读: