W3schools city project

So I’m trying to do this simple w3schools project

However my attempt comes out to produce this

And I can’t quite seem to find the issue

<DOCTYPE html>
<html lang="en"
<head>
<title>CSS Template</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
{
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, San-serif;
}
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/*create two columns that float next to each other*/
nav {
float: left;
width: 30%;
background-color: #ccc;
padding: 20px;
}
/*style the list inside the menu*/
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: right;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
}
/*clear float after the columns*/
section::after {
content: "";
display: table;
clear: both;
}
/*style the footer*/
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}

@media (max-width: 600px) {

nav, article {
width: 100%;
height: auto;
  }
}
</style>
</head>
<body>

<h2>CSS Layout Float</h2>
<p>In this example, we have created a header, two columns/boxes and 
a footer. On smaller screen, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect (you will learn more
about this in our next chapter - HTML Responsive.)</p>

<header>
  <h2>CITIES</h2>
</header>

<section>
   <nav>
	<ul>
	  <li><a href="#">LONDON</a></li>
	  <li><a href="#">PARIS</a></li>
	  <li><a href="#">TOKYO</a></li>
       </ul>
   </nav>

<article>
  <h1>LONDON</h1>
  <P>London is the capital city of England. It is the most populous city
   in the United kingdom, with a metropolitan area of over 13 million inhabitants.</p>
     <p>Standing on the river Thames, London has been a major settlement for
  two millennia, its history going back to its founding by the Romans, who named it Londinium</p>
  </article>
</section>

<footer>
  <p>Footer</p>
</footer>


</body>
</html>





</head>

make your section element a ‘flex’ element, that should help, and also not sure how you envision it, but thats a start!!

1 Like

Is this done by adding class=“flex-container” to the section tag? How is this done exactly?
And I envision it the way it’s produced on the w3school website, with the nav element and the article in line.

seems like you can do some reading on this topic, mdn is a great place for things like these, try this one for an instance : flex - CSS: Cascading Style Sheets | MDN

and to answer your question, you can simply do so directly targeting your ‘section’ element in your ‘css’ but you can give also give a class name to it as well, which is equally if not better way to do so (i.e. section {display: flex})