Question

OK so I’m trying to make a top fixed menu and I have this CSS:

#top {
    background-color: #fff;
    padding: 0;
    border-bottom: 1px solid #333;
    border-top: 1px solid #333;
    box-shadow: 0 1px #000, 0 2px 1px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 1px #000, 0 2px 1px rgba(0, 0, 0, .4);
    -webkit-box-shadow: 0 1px #000, 0 2px 1px rgba(0, 0, 0, .4);
    position: fixed;
    width: 100%;
    z-index: 15;
    top: 0;
    }

As you can see I have width: 100% but when loading the page the top div is a little crooked to the right, not fully width. I took a screenshot available here. I tested in Opera 11 and Google Chrome.

What am I doing wrong?
Thanks in advance!

Answer 1

You can replace width: 100% with left: 0; right: 0.

Alternatively, you can keep width: 100%, but then you’ll need to remove the default margin on body:

html, body {
    margin: 0;
    padding: 0;
}