Question

Hey guys I’m building my first website and I cannot figure how to get rid of the extra space on the right which brings up the horizontal scrollbar. The site is http://qtsocial.com/accounts/login/ … If you can look at the css and give me a clue I would really appreciate it. Thanks!

body {
    background: url(http://qtsocial.com/static/images/body-bkg.png) repeat scroll;
    margin: 0;
    padding: 0;
}

.container {
    margin: 0pt auto;
    width: 100%;
}

#header {
    background: url(http://qtsocial.com/static/images/hdr-bkg.png);
    background-repeat: repeat-x;
    height: 181px;
    position: absolute;
    z-index: 100;
    top: 0px;
    left: 0px;
    width: 100%;
    margin: 0;
    padding: 0;
}

#logo {
    background-image: url(http://qtsocial.com/static/images/QTlogo.png);
    background-repeat: no-repeat;
    height: 88px;
    position: absolute;
    top: 40px;
    left: 25px;
    width: 100%;
}

#navigation{
    height:40px;
    z-index: -1;
}

Answer 1

You have the DIV with id of logo set to 100% width (which is setting it to the page width) then you’re indenting it by 25px. Change the width of #logo on line 25 of login.css to be the width of the background image you’re using (299px).