Setting the style of margin: 0 auto will centre the [body] on the page
but you would need to set a width (eg width: 80%) otherwise it takes up the whole page.

Make believe list of my favourite things (Section 1)

Restaurants

McDonalds
Gazza's Bistro
Charlie's Sannies

Films

Enter The Dragon
Independance Day
Airplane
Die Hard

This is an [Article] it shows content that belongs here but could be separate from the page too.

I wanted it to be by the side of the lists so had to put the lists in their own [div].

This is section 2

This section I wanted to appear next to the first section
so I created a [div] that covers both Section 1 and Section 2
(ALL [div]'s are bordered in Blue) and gave it a style...
style="display:flex;
This way the &bnsp;&bnsp;flex&bnsp;&bnsp; means it can line
the inside sections up how I want.

Each of the two sections have a background-color set as #B0E0E6...
which is the same as the [div] that contains them.

And then within the first section are 2 other sections (one below the other)
I then added an [article] to section 1
and an [aside] to section 2

General Structure/Layout

(Not fully used on the code for this page)

header - Defines a header for a document or a section
nav - Defines a set of navigation links
section - Defines a section in a document
article - Defines an independent, self-contained content
aside - Defines content aside from the content (like a sidebar)
footer - Defines a footer for a document or a section
details - Defines additional details that the user can open and close on demand
summary - Defines a heading for the <details> element

You can read more about semantic elements in our HTML Semantics chapter

You can use the...

<figure>
   <img src="images/..." />
   <figcaption>
   Include text here describing the image
   </figcaption>
</figure>

Use the figure to structure a photo in a document and figcaption to display a caption for the photo You can read more about figure/figcaption here

<figcaption>
A little image of Wile E Coyote.
</figcaption>

</figure>