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 relate to a relative css of master page?

    How do I indent elements? Example in details

    How do I change the a border-color on rollover?

    How to increase width of children from the right to the left? [closed]

    How to keep div height fixed during changing its content?

    how can I do this space between tables? [closed]

    CSS div border shows up, but is transparent

    How can I move a div with direction in JavaScript?

    How to use the native browser outline in CSS?

    How to give effect on dragging in css or through jquery

    How to lay down elements vertically from top to bottom, and then from right to left, using a clean HTML markup?

    How to fix hover on transparent photo

    How to include template with css to all pages on website

    How to jump to a tab position (or equivalent) in html or css

    How to inline the contents of an entire stylesheet with Wordpress?

    How do I show divs in an IE print preview page that are programmatically hidden via javascript?

    How can I find the css error when I run a jquery plugin on IE8?

    How do I make this background repeat horizontally the entire way across the screen?

    How do i apply fadein and fadeout effect for this?

    How to make parent div above child div without position absolute?

    How to save css stylesheet pointer on php session?

    How to make a smooth dashed border rotation animation like 'marching ants'

    How to style google cse

    How to prevent mobile browser micro-shrinking HTML block level elements?

    Chrome showing target link after event has been prevented

    How to trim off Image in CSS?

    how to overwrite inline styles in print css?

    How to put gradient on top of background image but below text

    HTML5 vs HTML4 - h1 tag rendered with extra space - how to remove?

    How to give style to iframed page content using parent pages css?