solution with html css flexbox and vanilla javascript

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

• I have other recommendations regarding your code that I believe will be of great interest to you.

CSS 🎨:

• Let me explain, How you can easily center the component for better layout without usage of absolute positioning.

• We don't need to use absolute to center the component both horizontally & vertically. Because using absolute will not dynamical centers our component at all states

• To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

• For this demonstration we use css Grid to center the component

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

• Now remove these styles, after removing you can able to see the changes

.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 10%);
}

• Now your component has been properly centered.

.

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

Happy coding!

Hello, you can add the <main> tag around around the container, which specifies the main content of a document.

<main>
<div class="container" >
<div class="main-content">
      
<h1>Stay updated!</h1>

then modify your CSS to use flex and removing the position properties as follows:

body {
background-color: var(--darkSlateGrey);
font-size: 16px;
}
main{
display: flex;
align-items: center;
justify-content: center;
height:100vh;
}

.container {
background-color: var(--white);
display: flex;
width: 800px;
height: 500px;
padding: 20px;
border-radius: 20px;
}

*** I added the correct background color, you may have to adjust your media query css

In your CSS code, give body element height of 120 or 150vh by using media query with max-height: 400px; for screens with small heights so that your web app look good on small screens.

you were using transform

transform: translate(-50%, 10%);

The correct way to center a div using the positioning property is

transform: translate(-50%, -50%);    ✔

Try it out!!