@AshongAbdallah06
Posted
- Because the
<figure>tag you used around the image has default margins around it. And since you specified 100%, it took the whole width of thefigure. - I don't really understand the question. But if you mean the whole background then I don't think it's the rose color but rather the eggshell (hsl(30, 54%, 90%). You might wanna give the body more margin or padding on the sides.
- Same as Number 1. Some elements have default styles on them already. In your case,
<h1>,<h2>and<p>have default margins. And you've also added paddings to them. That is why there is so much space between them. - That is the behavior of tables.
Solution
First, you need a reset to remove all default margins and paddings at the top of the page.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
This will remove all default paddings and margins on elements like <p> <h1> etc...
Now you can specify your own spacing to match the design. This should solve most of your problems.
For the table section, you might want to use flexbox
<div class="row">
<div>Calories</div>
<div>277kcal</div>
</div>
Style it to match the design. I hope this makes sense.
Marked as helpful
@AD-Anderson
Posted
@AshongAbdallah06 Thank you! I really appreciate the feedback. It helped me a lot. It now looks more close to the design but still a little off. For the second ques, I meant for "Preparation Time" the rose white color for the background, I still can't figure out. I also feel the entire page needs to be centered and I can't get it to center. Would you happen to have any other suggestions on how to do that?
@AshongAbdallah06
Posted
@AD-Anderson I'm guessing you created the mobile design first. So to center the entire page, you might want to wrap the whole thing inside a div.
<div class="upper-container"> // Call it whatever you want
<header>Header markup here</header>
<main>Main content here</main>
</div>
And then apply these styles
Styles.css
body {
font-family: "Outfit", sans-serif;
background-color: hsl(30, 54%, 90%);
}
.upper-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 30rem;
margin: 0 auto;
background-color: white;
border-radius: 0.5rem;
}
You can change the width to your desired one.
Tip: You might want to add a border-radius on the image too and add padding to the Nutrition section.
Additional Tip: It's best practice to wrap everything inside a container at all times.
Marked as helpful
