Recipe Page

Hi, Rahul👋

Congrats for completing this challenge 🎉 and you did great job 👏

No, using absolute will be wrong approach, I review your code, the mistake you did is your necessary elements which are should be used in body(parent) div, but you used in child div. To center the container you should be used this property in parent container => body{ display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 4rem; **min-height: 100vh**;(add this to maintain your screen actual size) }

Hope, this small tip will help you to center your container.

If, still have issue then feel free to ping me here ☺️

Happy Coding❤️

Hello Rahul! 👋

Like Bishal said, Absolute isn't the best solution altough you can center your container with the position:absolute if you really want to.

body:{
    position:relative; /* This is base style for body and don't need to by write */
}
.container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

For your text indent on some list points : <ul> and <ol> have really annoying style. The best is sometimes to remove all base style from it and make your own. In this case I would have done it this way and hard write the numbers of the list. 🧐

This is one way (if not the only) to center a container using absolute and relative position. 😎

Your solution is very good! Keep the good work. 💪