There’s a bug with the ‘Build an Event Flyer Page’ Lab that doesn’t allow you to nest the body element in a div element or vice-versa. It gives an error message stating: “You should have a header element within the body element”. I was able to fix the error by removing the div element entirely (it isn’t part of the user story) which limited my options of trying to style it better. I know its a small issue but I thought I should mention it. Sorry if I’ve inconvenienced anybody since this is my first post here. Please let me know if this is the wrong place to post/the post is unwanted.
Your first example is invalid HTML. The body element must be a direct child of the html element. Please review this HTML Boilerplate theory lecture.
While your second example is valid, you were not asked to add a div element in the instructions. To pass the tests, please limit your code to what is asked. You can always “make it yours” later on your own system.
Okay, I tried the first example due to getting an error message after trying the second example. To be clear, I tried to create a similar layout as shown in the example project where it appears that they have used a div element to change the background color of the content region (this was the technique used in the ‘Design a Cafe Menu Workshop’ under Basic CSS). Is it possible to achieve a similar layout without using a div element there? I know it’s mentioned that the app should be functionally similar but its not like I did something totally irrelevant.
I’m looking at the example app and I don’t see any change to the background color. That said, you do not need to mimic the example app’s style. In fact, there’s a note to that effect.
However, if you want to change the background color of the content in the main element, simply create a CSS selector on that element.
