Your solution looks good but does not display well on smaller screens. Try not to use width and heights on containers and let them expand to fit.
Try taking the width and height rules off the gross_boite class and adding max-width:900px
Take the width rule off the jolie-boite class
On the img rule add width:100% and take off the margin rules
body{
background-color: hsl(30, 54%, 90%);
font-family: Outfit;
font-weight: 400;
font-size: small;
color:hsl(30, 10%, 34%);
margin: 50px;
font-size: 16px;
}
.grosse-boite{
background-color:hsl(0, 0%, 100%);
max-width: 900px;
/* width: 720px; */
/* height: 1525px; */
border-radius: 25px 25px 25px 25px;
margin: auto;
}
img{
width: 100%;
border-radius: 15px 15px 15px 15px;
/* margin-top: 45px; */
/* margin-left: 45px; */
/* margin-right: 45px; */
}
h1{
font-family: Young serif;
font-weight: 400;
margin-left: 45px;
margin-right: 45px;
color: hsl(24, 5%, 18%);
}
p{
font-family:Outfit;
font-weight: 400;
font-size: small;
margin-left: 45px;
margin-right: 45px;
}
.jolie-boite{
background-color: hsl(330, 100%, 98%);
/* width: 630px; */
height: 140px;
padding-top: 0.005%;
border-radius: 5px 5px 5px 5px;
margin-left: 45px;
margin-right: 45px;
}
h3{
color:hsl(332, 51%, 32%);
margin: 20px;
height: 10px;
border: 5px;
margin-left: 45px;
margin-right: 45px;
font-weight: 600;
}
ul{ list-style: none;}
li:before{
display: inline-block;
width: 2em;
margin-left: -1em;
margin-bottom: 0.5em;
}
li.prep-list:before{
content: "•";
color:hsl(332, 51%, 32%);
font-size: 16px;
}
li.ing-list:before{
content: "\25AA";
color: hsl(14, 45%, 36%);
margin-left: 15px;
font-size: 16px;
}
h2{
font-family: Young Serif;
color: hsl(14, 45%, 36%);
margin-left: 45px;
margin-right: 45px;
font-weight: 400;
}
ol{
list-style:none;
counter-reset: li;
margin-left: 65px;
margin-right: 65px;
}
ol li::before{
font-weight: 600;
font-size: 16px;
display: inline-block;
margin-left: -2.5em;
margin-right: 0.5em;
content: counter(li)". ";
color:hsl(14, 45%, 36%);
display:block;
margin-bottom: -25px;
line-height: 2rem;
font-size: 16px;
}
li {counter-increment : li}
table{
border-collapse: collapse;
width: 100%;
margin-left: 45px;
margin-right: 45px;
margin-bottom: 50px;
}
tr{
border-bottom: 1px
solid hsl(30, 18%, 87%);
}
tr.last-child{
border-bottom: 0;
}
th{
font-weight: 500;
text-align: left;
color:hsl(30, 10%, 34%);
padding-left:20px;
}
td{
font-weight: 600;
color: hsl(14, 45%, 36%);
padding:10px
}
.last-td{
border-bottom:none
}
hr{
border: 0.5pt solid hsl(30, 18%, 87%);
margin-left: 20px;
margin-right: 20px;
}