Alignment

HI i looked your html too , i think when you will try to tidy scope of tags considering open /close tags with stuff inside intended. Such approach generally make code more readable and easier to fix it, also allow to you found some issues and fix problem with on page output format (simply code became much more intuitive )

Tip! try to keep tags convention in your own code as you get it from code snippet:

<div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge"  target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Your name here</a>.
</div>

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

CSS 🎨:

Let me explain, How you can easily center the component for better layout To properly center the component on the page, you should use Flexbox or Grid layout. You can read more about centering the item📚. For this demonstration we use css Grid to center the component

body { min-height: 100vh; display: grid; place-items: center; }

Give some border-radius to the outer div. Adjust some padding to center align the image

I hope you find this helpful 😄 Above all, the solution you submitted is great !

If you find this comment helpful Please tick - 'MARK AS HELPFUL'.

Try justifying and aligning the whole container to center.