Challenge n°1: QR-Code by Markito

your code is well done, but i find it too big to be only one object in the center of the page, you can ratherly lower its height and use flexbox to keep its content centered:

/*this will center all the content in your page, now you can give 
individual properties to them*/
*{
background-color: hsl(212, 45%, 89%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/*now you can modify the inner content of the box:*/
.attribution {
font-family: 'Outfit', sans-serif;
font-size: 11px;
display: flex;
background-color: hsl(0, 0%, 100%);
flex-direction: row;
}
* {
background-color: hsl(212, 45%, 89%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/*modify the size of the image*/
img {
width: 300px;
border-radius: 25px;
}
/*now you can make changes to the main div*/
.qr-code {
background-color: hsl(0, 0%, 100%);
padding: 2%;
border-radius: 25px;
width: 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
/*keep on mind all of the flex code is just to make sure 
everything remains centered when you resize or make 
changes on margin, padding, or even the size of the objects*/
}
/*now your qr box is placed in the center of your page and there's no scroll
bar needed, remember that if you want to make it even smaller, all you have
to do is reducing the margins of the <p> objects and adjusting their font
size, i still think it's too big for the case, but as you like it, it's 
fine too.*/

Hi, i can't see your code, link doesn't work but you need put in your code: body{ min-height: 100vh; display: flex; justify-content: center; aligh-items: center; } So your qrcode card will be centralized, good work and keep going.