Recipe page

Your code looks good, but I think you can improve it:

• To position a container on different screens sizes you can use :

body{
min-width: 100dvw; 
min-heigth: 100dvh;
display: flex;
align-items: center;
justify-content: center;
}

The min-width and min-height ensure that if the page increases in size, it will take up the new space completely and center the container.

• For the bullets next to the list items, you can use:

ul{
margin-inline-start: -10px
}
li{
padding-left: 10px}

Instead of using margin, you can use padding to separate the bullets from the <li> elements. If you use margin, it might not work well with inline elements. If you replace a <span> with a <p> element or set the display to block, you might notice that the issue resolves. Some elements are inline or block by default, so you need to understand these properties and their effects in your code.

Your code looks good, but I think you can improve it:

• To position a container on different screens sizes you can use :

body{
min-width: 100dvw; 
min-heigth: 100dvh;
display: flex;
align-items: center;
justify-content: center;
}

The min-width and min-height ensure that if the page increases in size, it will take up the new space completely and center the container.

• For the bullets next to the list items, you can use:

ul{
margin-inline-start: -10px
}
li{
padding-left: 10px}

Instead of using margin, you can use padding to separate the bullets from the <li> elements. If you use margin, it might not work well with inline elements. If you replace a <span> with a <p> element or set the display to block, you might notice that the issue resolves. Some elements are inline or block by default, so you need to understand these properties and their effects in your code.