I have a basic website but I'm having a problem with my wrapper. It wont go to the edge of the screen, its like a few pixels off each side. To better explain my problem


As you can see the pink line is my wrapper, but it is off from the left edge and the top edge for some reason, and I cant get anything else lined up correctly because of this.

Any ideas?

My wrapper tag has height:100%
width:100%

Theres nothing out of the ordinary for anything else, just your regular stylesheet.

its kinda hard to say without seeing your code.

Can't tell a lot from that image but it looks like a 10PX padding call for the wrapper to me.

alrighty here goes

This is my first real attempt at coding something 100% on my own so please dont laugh :P

@charset "utf-8";
/* CSS Document */


body
{
    background-image:url(images/headerwhole.jpg);
    background-repeat:repeat-x;
    font-size:12px;
}

a:link, a:visited {
    color: #2388c7; 
    text-decoration: none;
    font-weight: normal;
}

a:hover {
    color: #2388c7;    
    text-decoration: underline;
    font-weight: normal;
}

p {
  margin-top: 0;
  margin-bottom: 5px;
  text-align: left;
}

div, p,  table, td, th {
    font-family: Lucida Grande, Verdana,Helvetica,Arial,sans-serif;
    color: #333;    
}

h1 {
    font:"Arial Black", Gadget, sans-serif;
    font-size:22px;
    color:#333333;
}

h2 {
    font:Verdana, Geneva, sans-serif;
    font-size:16px;
    color:#333;
}

.table
{line-height:150%;
font-size:14px;
}

#wrapper
{
    width:100%;
    height:100%;
}

#container
{
    width:1024px;
    margin-left:auto;
    margin-right:auto;
    height:100%;
min-height:100%; 
}

#header
{
    width:1024px;
    height:142px;
    float:left;
    margin:0px;
    padding:0px;
    position:absolute;
    top: 0px;
}
#logo
{
    float:left;
    background-image:url(images/logo.png);
    background-repeat:no-repeat;
    width:251px;
    height:52px;
    margin-top:20px;
}


#nav
{
    
    width:auto;
    margin-top:115px;

}

.spacer
{
    padding-left:20px;
    padding-right:20px;
}

#main
{
width:1024px;
height:auto;
padding-top: 141px;
margin:auto;
}

#left
{
    width:700px;
    float:left;
}

#right
{
    width:291px;
    float:right;
}

#righttext
{
width:275px;
margin-left:auto;
margin-right:auto;
}

#footer
{
    
height:36px;
background-image:url(images/footer.png);
background-repeat:repeat-x;
clear:both;

}

I see css files that use wrapper or header-wrapper. I see them that use container.

Either wrapper or container is the "norm" for containing all the page content. For what I can see of your page above one or the other would be correct but not both.

This page uses a wrapper and a container to create the wide spead at the top while containing the body within a set size.

How you call your CSS within your page deterines what the page will look like when it renders.

You need to zero out the margins and padding of your structural elements in the very beginning. Just define margin: 0, padding: 0 for everything.