used css property 'padding' to create space within the div.container

Community feedback

• 

  Hassan•940

  @hnasser44Posted over 1 year ago

  Hello, good job on completing the challenge! While your solution works, it's worth noting that using position: absolute on the container might not be the most optimal approach. Instead, you can achieve a similar result by adding the following CSS styles to the body tag:

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

  This will center the container both horizontally and vertically on the page without the need for absolute positioning. Additionally, you can apply the following styles to the .container class for a clean and modern look:

  .container {
      width: 300px;
      padding: 1rem;
      background-color: hsl(0,0%,100%);
      border-radius: 20px;
  }
  

  Lastly, you can make sure the image inside the container scales properly by using the following style for the .img class:

  .img {
      max-width: 100%;
      border-radius: 10px;
  }
  

  By following these guidelines, you'll have a more responsive and aesthetically pleasing design. Keep up the great work!

  Marked as helpful

  1