Design comparison
SolutionDesign
Community feedback
- @Bayoumi-devPosted over 2 years ago
Hey Natalia, The scrollbar appears on the page that because the
body
element has a defaultmargin
-->margin: 8px;
--- Remove the margin:body { font-family: 'Outfit', Arial, Helvetica, sans-serif ; font-size: 15px; background-color: hsl(212, 45%, 89%); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; margin: 0; /* <---- Add */ }
Hope this is helpful to you... Keep coding👍
Marked as helpful1 - @Sdann26Posted over 2 years ago
Add to the body for centering:
display: flex; justify-content: center; align-items: center;
And change <div class="container"> to <main class="container">.
You could even add a small shadow to the card with the box-shadow: 0 12px 16px -2px rgba(0, 0, 0, 0, 0.2) attribute.
And ready you will be perfect and without any error :D
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord