Set the width on main and not on the body, that should sort it out.
Solution 1 :
Solution 2 :
I actually found an answer. For those in need, I created an for the entire grid, wrapped by . After that, I set the position on fixed, and display on flex:
main {
position: fixed;
width: 100%;
height: 100%;
display: flex;
}
article {
display: grid;
grid-template-columns: 250px;
background-color: white;
border-radius: 10px;
width: 300px;
height: 500px;
justify-content: center;
margin: auto;
}
Problem :
I keep trying to center my grid container (main) vertically but won’t move. Tried with align-items and still won’t move.
Can anyone help me, please?
HTML:
<body>
<main>
<img
src="images/image-qr-code.png"
width="250px"
height="auto"
alt="Photo of QR Code"
/>
<h1>Improve your front-end skills by building projects</h1>
<p>
Scan the QR code to visit Frontend Mentor and take your coding skills to
the next level
</p>
</main>
CSS:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
width: 1440px;
height: 900px;
font-family: "Outfit", sans-serif;
background-color: hsl(212, 45%, 89%);
}
main {
display: grid;
grid-template-columns: 250px;
background-color: white;
border-radius: 10px;
width: 300px;
height: 500px;
justify-content: center;
margin: auto;
}
Comments
Comment posted by cdr-in
I did try this but no results..
Comment posted by codepen.io/damyco/pen/eYrqZaE
@cdr-in works on my side:
Comment posted by codepen.io/zzcdr/pen/vYjoKBM
I want it to look kind of like this:
Comment posted by damycode
Ahh so you wanted to center the whole thing in the middle of the screen. Yeah you got it right! Using flex to center stuff in this way is very common.