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

Posted by malcolm mowlam
malcolm mowlam
Pro Student 3,854 Points

challenge task 2 of 3

can anyone please help with challenge task 2 of 3 css layouts

style.css 
/* Complete the challenge by writing CSS below */

header {
  text-align: center;
}
.logo {
  width: 110px;
  margin: auto;
} .main-nav li  {
  padding: 10px 15px;

display: block;  }
index.html 
<!DOCTYPE html>
<html>
<head>
    <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">
</head>
    <body>
    <div class="container">
        <header>
            <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>
            </ul>
        </header>
    </div>
    </body>
</html>

1 Answer

Steven Parker
Steven Parker
205,347 Points
Steven Parker
Steven Parker
205,347 Points

The plain "block" setting will take up the full width — it is not the one that "flows with surrounding content".

Did you start over? You already had the correct setting when you asked your previous question about this same challenge.

And where did that "padding" setting come from? It's not in the instructions.

malcolm mowlam
malcolm mowlam
Pro Student 3,854 Points

the previous time i was working on css basics i am now working on css layouts

Steven Parker
Steven Parker
205,347 Points
Steven Parker
Steven Parker
205,347 Points

malcolm mowlam — Did this resolve your issue? You can mark a question solved by choosing a "best answer".