Well you have a lot going on here that needs some work.
First check out the valid values for the float property (http://www.w3schools.com/cssref/pr_class_float.asp)
Then take a look at the shorthand for margin and padding (http://www.w3schools.com/css/css_margin.asp)
As a hint you can rewrite your margin/padding rules this way:
#main {
background-color: blue ;
padding: auto ;
float: left ;
margin: auto ;
width: 50% ;
height: 500px ;
}
This will make your css less cluttered and make it easier to spot your error. (Hint - take a look at your margin-left value in #navigation)
One thing that you can do is to validate your css at: https://jigsaw.w3.org/css-validator/
Just click on the "By direct input" tab and paste your css in, and then click the check button. In your case it reports eight errors that when corrected will solve your problem.
One additional thing that you might find helpful -fFor an assignment like this, I find the it's good to mirror the structure of your document in your css going from most general to more specific. So it would organize my css like this:
body {
background:red;
}
#header {
header rules here
}
#navigation {
navigation rules here
}
#main {
main rules here
}
You may also want to take a look at the structure of your HTML. Typically it's good to group your content in a containing structure (a div or main or article element). And since you're working in HTML 5 you should probably use the <header> <nav> and <main> tags rather that div tags with ids.
If any of this is unclear please feel free to ask for clarification.
First check out the valid values for the float property (http://www.w3schools.com/cssref/pr_class_float.asp)
Then take a look at the shorthand for margin and padding (http://www.w3schools.com/css/css_margin.asp)
As a hint you can rewrite your margin/padding rules this way:
#main {
background-color: blue ;
padding: auto ;
float: left ;
margin: auto ;
width: 50% ;
height: 500px ;
}
This will make your css less cluttered and make it easier to spot your error. (Hint - take a look at your margin-left value in #navigation)
One thing that you can do is to validate your css at: https://jigsaw.w3.org/css-validator/
Just click on the "By direct input" tab and paste your css in, and then click the check button. In your case it reports eight errors that when corrected will solve your problem.
One additional thing that you might find helpful -fFor an assignment like this, I find the it's good to mirror the structure of your document in your css going from most general to more specific. So it would organize my css like this:
body {
background:red;
}
#header {
header rules here
}
#navigation {
navigation rules here
}
#main {
main rules here
}
You may also want to take a look at the structure of your HTML. Typically it's good to group your content in a containing structure (a div or main or article element). And since you're working in HTML 5 you should probably use the <header> <nav> and <main> tags rather that div tags with ids.
If any of this is unclear please feel free to ask for clarification.
