small space keeps showing to right side of my website w


Tags: html5,css3,width,overflow,viewport

Problem :

I've been having this issue with this webpage I've been working on. Whenever I view the page in google chrome on my mac, I get a sliver of space to the right of page when I scroll to the right. I'm not really sure how to fix the problem. Here's an image to show what I'm talking about, along with my html and css. Thanks in advance to anyone that can help me.

Image: http://imgur.com/0JAZsgg&KcUfJZl&ephxQZC#2

Here's my html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../scripts/javascript/responsive_drop_down.js"></script>
    <link href="../css/main_stylesheet.css" rel="stylesheet" type="text/css" media="screen"/>
    <link href="../css/print_stylesheet.css" rel="stylesheet" type="text/css" media="print"/>
</head>

<body>
    <div id="wrapper">
        <header>
            <h1>This is a placeholder <br />
                for header</h1>
        </header>

        <nav class="nm">
            <div class="mobilmenu"></div>
            <div class="mobile-container">
                <ul>
                    <li class="white"><a href="#">Home</a></li>
                    <li class="red"><a href="#">Video</a></li>
                    <li class="purple"><a href="#">Pictures</a></li>
                    <li class="blue"><a href="#">Audio</a></li>
                    <li class="green"><a href="#">Other Work</a></li>
                    <li class="yellow"><a href="#">About Me</a></li>
                    <li class="gray"><a href="#">Contact Me</a></li>
                </ul>
            </div>    
        </nav>

        <div class="content-container">

            <article class="content-main">
                <section>
                    <h1>Heading goes here...</h1>
                    <time datetime="#">Time will go here.</time>
                    <p>Content will go here...</p>
                </section>
            </article>

            <aside class="sidebar">
                    <p>More Content to come soon.</p>
            </aside>
        </div>    

        <div class="footer-position">
            <footer>
                <span class="copyright">All rights reserved 2014.</span>

                <nav class="nf">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Video</a></li>
                        <li><a href="#">Pictures</a></li>
                        <li><a href="#">Audio</a></li>
                        <li><a href="#">Other Work</a></li>
                        <li><a href="#">About Me</a></li>
                        <li><a href="#">Contact Me</a></li>
                    </ul>
                  </nav>
              </footer>
           </div>    
       </div>
   </body>
</html>

Here's the css:

@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,300italic,400italic);
@font-face 
{
font-family: 'bebas_neueregular';
src: url('../font/BebasNeue/bebasneue-webfont.eot');
src: url('../font/BebasNeue/bebasneue-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../font/BebasNeue/bebasneue-webfont.woff') format('woff'), 
     url('../font/BebasNeue/bebasneue-webfont.ttf') format('truetype'), 
     url('../font/BebasNeue/bebasneue-webfont.svg#bebas_neueregular') format('svg'), 
     url('../font/BebasNeue/BebasNeu.otf') format('opentype');
font-weight: normal;
font-style: normal;

}


body
{
width:100%;
font-family: 'Ubuntu', sans-serif;
margin:0;
padding:0;
background-color:#84888B;
overflow-y:scroll;
direction:ltr;
display:block;
}

#wrapper
{
display:block;
width:100%;
margin:0 auto;
padding:0 auto;
}

header
{
font-family:'bebas_neueregular', sans-serif;
background-color:#5D0660;
color:#E21208;
text-align:center;
padding:15px;
}

nav
{
display:block;
font-family:'bebas_neueregular', sans-serif;
text-align:center;
overflow:hidden;
}

nav ul
{
list-style:none;
}

nav ul li
{
display:inline-block;
}

nav ul li a
{
text-decoration:none;
}

nav.nm
{
width:100%;
background-color:#000000;
font-size:125%;
margin:0;
padding:0;
}

nav.nm ul
{
margin:0 auto;
margin-top:0;
}

nav.nm ul li a
{
display:block;
color:#ffffff;
padding:15px 16px;
}

nav.nm ul li a:hover
{
color:#000000;
-webkit-transition:450ms ease;
-moz-transition:450ms ease;
transition:450ms ease;
}

nav.nm ul li.white a:hover
{
background-color:#ffffff;
}

nav.nm ul li.red a:hover
{
background-color:#E21208;
}

nav.nm ul li.purple a:hover
{
background-color:#9E00A3;
}

nav.nm ul li.blue a:hover
{
background-color:#1A297F;
}

nav.nm ul li.green a:hover
{
background-color:#319032;
}

nav.nm ul li.yellow a:hover
{
background-color:#E1E13D;
}

nav.nm ul li.gray a:hover
{
background-color:#84888B;
}

nav.nf
{
font-size:85%;
}

nav.nf ul li:last-child 
{
border-right:none;
}

nav.nf ul li 
{
border-right:1px solid #000000;
}

nav.nf ul li a
{
display:block;
padding:2px 9px;
color:#000000;
}

nav.nf ul li a:hover
{
color:#ffffff;
}



footer
{
width:100%;
background-color:#1A297F;
text-align:center;
margin-top:38.6%;
padding:0.2%;
}


Solution :

I just tried your code on my Windows 8 machine and I can't find any problems. Your screenshot looks like a margin problem. If you aren't familiar with how margins and padding work this little diagram over at html dog has helped me understand how it works:

http://www.htmldog.com/guides/css/beginner/margins/

If the problem is specific to Google chrome on the Mac (which I don't have access to unfortunately) I would think that the default CSS styling of that version of chrome could be getting in the way. A good CSS reset could fix the problem:

http://meyerweb.com/eric/tools/css/reset/

Just copy and paste that code into your CSS file, any of your code that appropriately over rides the CSS reset will take precedence, leaving the reset to fix any little differences between browsers.


    CSS Howto..

    How to add row top and bottom margins to asp.net gridview?

    How to disable and re-enable tabindex of hidden/visible elements?

    How do I apply odd/even styles to elements while taking into account excluded classes? [duplicate]

    How to replace fixed values in responsible form css

    how to add string to the class javascript(jquery)

    How to emulate window title bar in CSS/HTML

    How to add border/outline/stroke to SVG elements in CSS?

    CSS how to not use style

    Show div on hover span styling

    How to make expand-collapse different div heights according to device width using css/javascript

    How to override a filter:none in CSS

    How to slowly move header while user scrolls the page?

    css: how to get the browser's default font family

    How to calculate sine, cosine in Less?

    How to implement this button in HTML / CSS?

    How do you programmatically apply a css class to an asp.net control?

    How to override CSS Background that already has !important?

    How to modify the font family within bootstrap

    How do i make my divs scrollable ONLY when the content is full?

    How to stop animation using jQuery

    How to do centered

    with
    on both sides over a background image

    How do I make this sprite behave how I want?

    How to following a link without modifying the displayed url and triggering css animation?

    How do I make a textarea resize properly when I resize browser window?

    How to add dynamic CSS source urls in Squishit?

    How to put those things next to eachother? CSS

    How to make css for navbar (Jquery Mobile) bottom up submenu automatic?

    How to create a custom shape - css

    How to get messages column up on the right?

    CSS - How to make a text to be shown under the center of an element, no matter how long the text is