Learn Basic CSS by Building a Cafe Menu - Step 25

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Now it’s easy to see that the text is centered inside the div element. Currently, the width of the div element is specified in pixels (px ). Change the width property’s value to be 80% , to make it 80% the width of its parent element (body ).

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
    <div>
      <header>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
      </header>
      <main>
        <section>
          <h2>Coffee</h2>
        </section>
      </main>
    </div>
  </body>
</html>

/* file: styles.css */
body { 
  width:80%px
  /*
  background-color: burlywood;
  */
}

h1, h2, p {
  text-align: center;
}
div {
  width: 300px;
  background-color: burlywood;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Challenge: Learn Basic CSS by Building a Cafe Menu - Step 25

Link to the challenge:

2

hiya! I see your code is posted but there is no question yet?

3

Now it’s easy to see that the text is centered inside the div element. Currently, the width of the div element is specified in pixels (px ). Change the width property’s value to be 80% , to make it 80% the width of its parent element (body ).
How to change into 80% widtj

4

this is the line that you were using to make the width 80%, so just remove the ‘px’ letters and add a semi-colon ; to the end of the line.

(the px is a unit of pixels, and % is another unit, so they cannot be used together)

1 Like