Single price grid component

Community feedback

• 

  Amal Karim ✅•1,290

  @amalkarimPosted almost 2 years ago

  Hi Talasa, congratulations for completing the challenge!

  I think the problem lies in this code:

  body {
      width: 375px;
      max-width: 400px;
      margin: auto;
  }
  

  The browser will assume that body's width is always 375px (smaller width overrides max-width), therefore it will calculate the center position based on that number. Remove width: 375px; and max-width: 400px; to solve the problem. Or, just remove them all, because margin: auto; here doesn't do anything.

  To position the <div class="container"> in the middle of the page, instead of using margin: auto;, I suggest better solution using flex. Like this:

  body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
  }
  

  Hope this helps. Let me know if there's still something that needs to be addressed.

  Happy coding!

  0