CODEWITHSUNDEEP
htmlcss
Kadeem L
Kadeem L

Reputation: 863

Unwanted horizontal scroll bar

I'm having a bit of a problem. For some reason a horizontal scroll bar keeps appearing from my code. I've tried everything but I can't seem to remove it. The following link is a live preview of the code.

http://jsfiddle.net/y5x7V/

HTML

 <body>
 <section class="contain">
 <div id="section-nav" class="section-nav">
 <div class="top">
 <ul>
 <li class="logo"><a href="#">Magna Contra</a></li>
 <li class="active"><a href="#">Blog With Us</a></li>
 <li><a href="#">Compxta</a></li>
 <li><a href="#">Laurie</a></li>
 <li><a href="#">SUBTITLESOFLIFE</a></li>
 </ul>
 </div>
 </div>
 </section>

 <div class="bg">

 <h1>SUBTITLESOFLIFE</h1>
 </div>

 <ul class="check">
 <li class="bold"><a href="#">Hot Trends</a></li>
 <li class="topic"><a href="#">Daft Punk</a></li>
 <li class="topic"><a href="#">#bbcqt</a></li>
 <li class="topic"><a href="#">Petite Noir - Major</a></li>
 <li class="topic"><a href="#">Alt J Album Teaser</a></li>
 <li class="topic"><a href="#">Materialistic Happine$$</a></li>
 <li class="topic"><a href="#">WOLF</a></li>
 </ul>

 <div class="contar">
  Lorem Dosi
 </div>

 </body>
 </html>

CSS

ul
{
list-style-type:none;
margin:0;
padding:0;
text-align: center;
}

.check{
list-style-type:none;
margin:0;
padding:0;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
display: inline-block;

}




::selection{background:red;color:red;}::-moz-selection{background:red;color:red;}

li
{
display: inline;
padding:15px;
text-align: center;
margin:auto 0;
position: relative;
}

li a{
  text-decoration: none;
  color:#bbbbbb;
  font-family: "proxima-nova",sans-serif;
  text-transform: uppercase;
  text-align: center;
  font-size: 0.78em;
letter-spacing: .2em}

hr{
  color:#dfe0db;
    border: 0;
background-color: #dfe0db;
height: 1px;
}

.bold{
  display: inline;
}

.bold a{
  color:#e94378;
}
.topic{
  display: inline;
padding:8px;
text-align: center;
margin:auto 0;
position: relative;

}

.topic a{
-webkit-transition:400ms;-moz-transition:400ms;-o-transition:400ms;transition:400ms;color:#bbb;font-weight:700;outline:0;text-decoration:none}

.topic a:hover{
  color:#e94378;text-decoration:none}

}

.logo a{
  color:#bbb;
  font-size: 0.78em;
  text-decoration: none;
  text-transform: uppercase;
}


img#hv {
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}

img#hv:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}
.image {position: relative; text-align: center;width:100%;height:75%;}

.image span {position: absolute; line-height: 20px; display: block; top: 50%; 
    margin-top: -10px; width: 100%; color: white;font-family: "proxima-nova";
    text-transform: uppercase;
    font-size: 1.5em; letter-spacing:;}


@media screen and (max-width:800px) { 
   .image span { 
        font-size:0.8em; 
    }
}
@media screen and (max-width:400px) { 
    .image span {
        font-size:0.7em; 
    }
}



.bg{
  background-color: #e94378;
}

img.ri
 {
 position: relative;
 max-width: 100%;
 width:100%;
 display: inline-block;
 vertical-align: middle;
 }

 @media screen and (orientation: portrait) {
 img.ri { max-width: 100%; }
 }
 @media screen and (orientation: landscape) {
 img.ri { max-height: 100%; }
 }


.text{
font-family: "proxima-nova";
  font-size: 1em;
letter-spacing: .2em;
  text-transform: uppercase;
background-color: #e94378;
padding:20px;
color:yellow;
position: absolute;
left:200px;
bottom:50px;
}

.tex{
  font-family: "proxima-nova",sans-serif;
  font-size: 2.5em;
  letter-spacing: 3px;
  text-transform: uppercase;
  bottom:160px;
  left: 320px;
  color:white;
  padding: 10px;


}

.image{
  vertical-align: middle;
}
.logo a:hover{
color:white;
}
.active a{
  color:white;
}

.contain{
  display: table;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
.block {
  display: table-row;
  height: 1px;
}
.navigation {
  display: inline-block;
  padding: 10px;
  width:100%;
  margin: auto;
  height: 150px;
}

.top {
  background-color: #444;
  width:100%;
  display: inline-block;
  padding: 10px;
  text-align: center;


}

.navigation:nth-child(odd) {
  background: #222;

}
.push {
  height: auto;
}
.contar {
  margin: 0 auto;
  text-align: center;
  width:100%;
  height:400px;
  background-color: white;


}

img.ft{
  float:left;
}
.featured{
  background-color: white;
  width:69%;
  text-align: center;
  margin: 0 auto;
  display: inline-block;;
}
.block:nth-child(odd) {
  background: #fff;
}


.search {
border:0px; 
background-color:transparent; 
color:white;
display: inline-block;
height:28px;
}

.section-nav a{-webkit-transition:400ms;-moz-transition:400ms;-o-transition:400ms;transition:400ms;color:#bbb;font-weight:700;outline:0;text-decoration:none;}
.section-nav a.active,.section-nav a:hover{color:#fff;text-decoration:none}



h1{
font: 800 1em "proxima-nova", sans-serif;
font-size:3.125em;
text-align:center;
padding:10px 10px;
margin:20px 20px;
background-color:;
position: relative;
text-decoration:none;
display:inline-block;
letter-spacing: 6px;
color:yellow;}

h1 a{
text-decoration: none;
letter-spacing: 8px;
padding-left: 0.15em;
color:#a8a820;
}



.txt{
  font:800 proxima-nova;
}







h2{
font: 800 1em "proxima-nova", sans-serif;
font-size:3.125em;
text-align:center;
padding:10px 10px;
margin:20px 20px;
background-color:;
position: relative;
text-decoration:none;
display:inline-block;
letter-spacing: 6px;
color:yellow;}

h2 a{
text-decoration: none;
letter-spacing: 8px;
padding-left: 0.15em;
color:#a8a820;
}

Upvotes: 6

Views: 12533

Answers (7)

blend
blend

Reputation: 650

Don't use overflow-x: hidden - it only papers over the cracks, it doesn't fix the issue. You can fix it by using the box-sizing property on the top div:

.top {
    background-color: #444;
    width:100%;
    display: inline-block;
    padding: 10px;
    text-align: center;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

}

This takes your padding: 10px into account when applying 100% width.

You can also use a polyfill to check for browser support, using the Modernizr plugin.

Upvotes: 5

Albzi
Albzi

Reputation: 15619

Line 261 of css you provided, change from padding: 10px;, to padding: 10px 0;.

Upvotes: 0

Nick R
Nick R

Reputation: 7794

Change 

.top {padding:10px;}

to 

.top {padding:10px 0; }

Upvotes: 0

NibblyPig
NibblyPig

Reputation: 52952

You can fix this correctly rather than hacking in some CSS to hide the scrollbar by fixing the top class in your CSS. Set the padding to 0 (as it's taking the full width of the parent) by adding:

padding:0;

to .top

JSFiddle

You can set the padding's height property to get the original look, this is just a quick fix to demo why it's breaking.

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128836

This is because you're combining both 100% width and padding. If 100% width evaluates to 100px, for example, adding 5px padding to the left and right on top of that will cause your element to have an overall width of 110px. You can get around this by changing the element's box-sizing.

.bottom, .top {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

JSFiddle demo.

Upvotes: 1

user2404546
user2404546

Reputation:

add overflow-x:hidden

to the main wrapper class

Upvotes: 1

Smeegs
Smeegs

Reputation: 9224

You can set overflow-x in body to hidden

http://jsfiddle.net/y5x7V/1/

body {
  line-height: 1;
  text-align: center;
  overflow-x: hidden;
}

Upvotes: 0

Related Questions