W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

header {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}

/* Style the topnav */
ul.topnav {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333333;
}

/* Style links in topnav */
ul.topnav li a {
  display: block;
  color: #f1f1f1;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
ul.topnav li a:hover {
  background-color: #dddddd;
  color: black;
}

div.flex-container {
  display: flex;
  flex-direction: row;
}

div.flex-container > div {
  margin: 10px;
}

/* Style the footer */
footer {
  background-color: #f1f1f1;
  padding: 8px;
  text-align: center;
}

/* Use media query and show the flex items vertically if screen width is less than 600px */
@media screen and (max-width:600px) {
  div.flex-container {
    flex-direction: column;
  }
}
</style>
</head>
<body>

<header>
  <h1>My Header</h1>
  <p>Resize the browser window to see the responsive effect.</p>
</header>

<ul class="topnav">
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
</ul>

<div class="flex-container">
  <div>
    <h2>Side</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna.</p>
  </div>

<div>
    <h2>Main Content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>

<div>
    <h2>Side</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.</p>
  </div>  
</div>

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

</body>
</html>

​x
 
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style>* {  box-sizing: border-box;}​body {  margin: 0;  padding: 0;}​header {  background-color: #f1f1f1;  padding: 10px;  text-align: center;}​/* Style the topnav */ul.topnav {  display: flex;  list-style-type: none;  margin: 0;  padding: 0;  background-color: #333333;}​/* Style links in topnav */ul.topnav li a {  display: block;  color: #f1f1f1;  padding: 14px 16px;  text-decoration: none;}​/* Change color on hover */ul.topnav li a:hover {  background-color: #dddddd;  color: black;}​div.flex-container {