HTML/CSS problem

[Petarkco]

I'm doing a course at the moment which requires me to make a website as part of the HTML/CSS section.

The website specifications asks for a right sidebar.

I've googled how to do it and found this site.

I've typed in the CSS and HTML (excluding the parts that would have made a left sidebar which isn't necessary).

 

The problem I have is that the main content starts from the middle of the page instead of the left.

 

This is how it is in CSS:

#container {width: 960px; margin: 0 auto;backrgound: #fff;}#header {height: 170px;background: REPLACEME.jpg;}#header h1 { text-indent: 0px; }#content {overflow: auto;}#content .sidebar {width: 180px; float: left;background: #dadada;}#content .sidebar.primary { padding: 0 20px 20px 30px; }#content .sidebar.primary li {list-style: none;font-size: 16px; color: #666; line-height: 24px;}#content #main {width: 600px; float: left; padding: 0;}#footer {height: 84px;background: REPLACEME.JPG;}

Is there anything I've done wrong here?

 

Let me know if you need more.

 

Thanks.

Edited September 9, 2013 by MLVD

[Barguast]

Try saving your HTML and CSS on a site like JSFiddle and posting the link here - it'll be much easier for others to see what is the matter and to post a fix that way.

[Forty]

Which element is the one aligning in the middle? It's possible that the #content element is floating next to the #container element, since that property will try to lay things aside each other if there's room.

[S0UTHERN_C0MF0RT]

One thing I noticed is that you have told your CSS file to send the .sidebar class to the left, but you said it should go right. Perhaps, because the #main class is farther down the code, the main body is getting pushed to the second-most position to the left.