CSS CSS Layout Basics Controlling Layout with CSS Display Modes CSS Display Modes Challenge

Display the list items inside .main-nav side by side. Use the display value that generates a block element that flows wi

/* Complete the challenge by writing CSS below */

header {
  text-align: center;
.logo {
  width: 110px;
  margin: auto;

.main-nav li {

<!DOCTYPE html>
    <title>Getting Started with CSS Layout</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
    <div class="container">
            <img class="logo" src="city-logo.svg" alt="logo">
            <ul class="main-nav">
                <li><a href="#">Ice cream</a></li>
                <li><a href="#">Donuts</a></li>
                <li><a href="#">Tea</a></li>
                <li><a href="#">Coffee</a></li>

1 Answer

18,748 Points

Remember that block display elements start a new line and take up the full width available. They do not flow with the surrounding content.

display has four possible values - none, inline, block, and inline-block. Most of the time you'll be using either block or inline-block. There's a good article here discussing the differences.

If you still feel stuck, let me know and we can talk through the solution. Good luck, and happy coding!