01 / 04
Blocks stack downwards
div, h1 and ul all have a habit of spreading the whole way across. Put anything down and the next element goes underneath.
That way of lining up is called block. It is why your header was stacked downwards.
Put a page together
INPUT · Slides
Put the header side by side
01 / 04
Blocks stack downwards
02 / 04
float lifts it and sets it beside
Add float: left; and the element floats over to the left. The next element then comes around beside it.
The basic move is to put float: left; on every box you want in the row.
.logo { float: left;}.menu li { float: left;}03 / 04
Take the bullets off the list
Once the menu is in a row, the bullets at the front of each li get in the way.
Put list-style: none; on the ul and they disappear.
.menu { list-style: none;}04 / 04
Finish it off as a band
Give the header a height and a background colour and it suddenly looks like a proper band.
height… how tall the band isbackground-color… the colour of the band
The CSS goes in style.css. You can leave the HTML alone. Have a go.
.header { height: 64px; background-color: #f3e5d0;}