Order summary component using HTML and CSS

hello, change the h2 tag to h1 and add font-family: "Big Shoulders Display". and font-family: "Lexend Deca" in p tag

Hi Greeshma! 👋

First of all, this looks great, so well done! 🎉

You're always going to have difficulties when using absolute positioning for layout, so I would strongly advise against it. Absolute positioning is good when you want to position something over the top of something else, and in relation to it. If you look at the notification bell icon on Frontend Mentor, you'll see that there's a red notch that appears indicating how many unread notifications you have. That's absolutely positioned, but mostly we use flexbox or grid to position our elements on the page.

You can position your order summary component by with flexbox like so:

body {
  margin: 0;
}

.main-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

Then remove position: absolute and left: 36% from .sub-block.

Here's a great guide to flexbox by CSS-Tricks.

Hope that helps! 😀