can u help me out :
- {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: hsl(30, 54%, 90%);
}
.container {
max-width: 50rem;
height: auto;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 2.2rem;
border-radius: 8px;
}
img {
width: 100%;
border-radius: 8px;
}
.prep-time {
background-color: hsl(330, 100%, 98%);
padding: 1.5rem;
border-radius: 8px;
}
.prep-time ul {
padding: 1.2rem;
}
.prep-time span {
font-weight: bold;
}
.ingredients {
margin-top: 1.6rem;
border-bottom: 1px solid;
}
.ingredients ul {
padding: 1rem;
}
.ingredients ul li {
padding: 0.6rem;
}
.instruction {
border-bottom: 1px solid;
margin-top: 1.6rem;
}
.instruction ol {
padding: 1rem;
}
.instruction ol li {
padding: 0.6rem;
}
.instruction ol span {
font-weight: bold;
}
.nutrients{
margin-top: 1.6rem;
}
.nutrients p{
padding: 1rem 0 1rem 0;
}
.nutrients table{
border-collapse: collapse;
width: 100%;
}
.nutrients td {
padding: 0.6rem ;
text-align: left;
border-bottom: 1px solid #000000;
}
.nutrients span{
font-weight: bold;
}
.nutrients table tr:last-child td {
border: none;
}
my design get attached and i can only see 70% of the length of the website , it doesn't move up. i checked ur code but my code is bit different so i was unable to get it .
html
<main>
<div class="container">
<img src="/images/image-omelette.jpeg" alt="">
<div class="recipe">
<h1>Simple Omlette Recipe</h1>
<p>An easy and quick dish, perfect for any meal. This classic omelette combines beaten eggs cooked
to perfection, optionally filled with your choice of cheese, vegetables, or meats.</p>
<div class="prep-time">
<h3>Preparation Time</h3>
<ul>
<li><span>Total</span>: Approximately 10 minutes</li>
<li><span>Preparation</span>: 5 minutes</li>
<li><span>Cooking</span>: 5 minutes</li>
</ul>
</div>
<div class="ingredients">
<h2>Ingredients</h2>
<ul>
<li>2-3 large eggs</li>
<li> Salt, to taste</li>
<li>Pepper, to taste</li>
<li> 1 tablespoon of butter or oil</li>
<li>Optional fillings: cheese, diced vegetables, cooked meats, herbs</li>
</ul>
</div>
<div class="instruction">
<h2>Instructions</h2>
<ol>
<li><span>Beat the eggs</span>: In a bowl, beat the eggs with a pinch of salt and pepper until
they are well
mixed.
You can add a tablespoon of water or milk for a fluffier texture.</li>
<li><span>Heat the pan</span>: Place a non-stick frying pan over medium heat and add butter or
oil.
</li>
<li><span>Cook the omelette</span>: Once the butter is melted and bubbling, pour in the eggs.
Tilt the pan to
ensure
the eggs evenly coat the surface.
</li>
<li><span>Add fillings (optional)</span>: When the eggs begin to set at the edges but are still
slightly
runny in the
middle, sprinkle your chosen fillings over one half of the omelette.</li>
<li><span>Fold and serve</span>: As the omelette continues to cook, carefully lift one edge and
fold it over
the
fillings. Let it cook for another minute, then slide it onto a plate.
</li>
<li><span>Enjoy</span>: Serve hot, with additional salt and pepper if needed</li>
</ol>
</div>
<div class="nutrients">
<h2>Nutrients</h2>
<p>The table below shows nutritional values per serving without the additional fillings.
</p>
<table>
<tr>
<td>Calories</td>
<td><span>277kcal</span></td>
</tr>
<tr>
<td>Carbs</td>
<td><span>0g</span></td>
</tr>
<tr>
<td>Protein</td>
<td><span>20g</span></td>
</tr>
<tr>
<td>Fat</td>
<td><span>22g</span></td>
</tr>
</table>
</div>
</div>
</div>
</main>
