Learn Basic CSS by Building a Cafe Menu - Step 73

HTML-CSS
1

+everything is good i passed the Step 73, but i was wondering all along why cant we just add the wanted padding n the menu class instead off the body and why doesnt it work if we did it how i recommended another thing i was wondering the width in the menu is a bit weird 100% width is not 100 % of the body so how does that work.
I know wat to do and have 0 problems with my task these were just so why questions, i would really appreciate some answers.

<!-- 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 class="menu">
      <header>
        <h1>CAMPER CAFE</h1>
        <p class="established">Est. 2020</p>
      </header>
      <hr>
      <main>
        <section>
          <h2>Coffee</h2>
          <article class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
        </section>
        <section>
          <h2>Desserts</h2>
          <article class="item">
            <p class="dessert">Donut</p><p class="price">1.50</p>
          </article>
          <article class="item">
            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
          </article>
          <article class="item">
            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
          </article>
        </section>
      </main>
      <hr>
      <footer>
        <p>
          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
        </p>
        <p>123 Free Code Camp Drive</p>
      </footer>
    </div>
  </body>
</html>

/* file: styles.css */
body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  font-family: sans-serif;
  padding:20px;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

.established {
  font-style: italic;
}

h1, h2, p {
  text-align: center;
}

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}

hr {
  height: 2px;
  background-color: brown;
  border-color: brown;
}

h1, h2 {
  font-family: Impact, serif;
}

.item p {
  display: inline-block;
}

.flavor, .dessert {
  text-align: left;
  width: 75%;
}

.price {
  text-align: right;
  width: 25%
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.2; 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 73

Link to the challenge:

2

the child element of the body (menu) is always going to be smaller because the body has has padding right now and also because of the max-width setting in the menu.

I think you probably can do the same effect with something like margin-top: 20px in the menu. But not with padding. (play with it and you will see that padding makes the yellow menu appear wider, but what they were attempting is to make the top section peeking behind the menu appear wider)

3

i see thanks alot now i get it and what is in the first scenario if the max width wasnt there i forgot to exclude that sry

4

also no matter what 100 percent of the body is never really 100 there is still a little remaining you know?

5

try to run the “inspect” tool (developer tools) on chrome or firefox.
if you put your mouse on the body for example and right-click then choose Inspect option you can examine the elements and their sizes and their styling to see which styles are affecting them and why the browser is displaying them in that manner
(you can also play with the settings to see what you need to change to get the full 100%)

6

ok thanks alot for the help

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.