When viewing this website, my goal is to have the main content div, which is identified by the id container, centered horizontally on the grey background. However, I want the black login panel to continue stretching across the entire width of the screen.
To achieve this layout, I attempted to apply the following rule:
#container {
margin: 0 auto;
}
Despite implementing this rule, it didn't work as expected. What could I be doing wrong?
Update
After receiving some advice, I was advised to resolve the issue by removing the max-width from the body and setting a specific width for the container.
Implementing these changes did center the container, but it caused it to take up all available horizontal space. My desired outcome is to have the container centered with a set width, such as 900px, and for the grey background to fill in the empty spaces on either side of the container.