HTML CSS

Hi Nikhil, good work in your first challenge.

I have some suggestion which might be helpful,

1. Change <p id="p1"> to <h1> and <p id="p2"> to <p> to simplify and avoid accessiblity issue!
2. For your text align issue

.container {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

Here, we are changing the flex direction to "column" i.e vertically and adding a gap of "1.5em" (or some else) between flex items.

Then, remove display: inline-block; & position: fixed in p#p1 & p#p2 and adjust margin & padding accordingly.

Happy Coding and Good luck on your frontend journey

Put your text in a div and the use display: flex to and align-items: center or text-align: center this should work. Just take a short tutorial on flex-box from youtube, if you are not used to it. Also add positioning to the attributes, use position: absolute bottom: (a value to make it stick to the bottom). Try these.