Beginner-QR-Code-challenge-using-basic-HTML-and-CSS

Hey buddy! So to center the box, if you remove all the margins you have set to the square class which will remove the scrollbar and add the following to the body class: min-height: 100vh; display: flex; justify-content: center; align-items: center;

This should center the box! Let me know if this helps :)

Wonderful job completing your first challenge! 😊

In addition to the other feedback you've received for this challenge, I have a few more recommendations:

• There are games you can play to learn how to center content. I suggest trying Flexbox Zombies, Froggy Flexbox and Grid Garden. All 3 of the games are free.

• Change your background color. You used a slightly different color. To do this I would change your code from:

background-color: #c4e4e9;

to

background-color: hsl(218, 44%, 22%);

• Add a <h1> element to your code. All sites should include a minimum of one <h1> element to indicate the the most important (or highest-level) heading on a page.

• Add a <main> tag around the main content on your webpage. All web pages should include one <main> tag. This is a semantic HTML element that defines the main content on a page such as primary sections, text, articles, etc.

Example:

<main>
  <div class='container'>
    <h1>Main heading text</h1>
    <p>paragraph text</p>
  </div>
</main>

I hope this is helpful! Great work & Happy Coding!

-Angie

Reading up on Flexbox will help you tons. Read this article and centering things will be a breeze. CSS Tricks: A Complete Guide to Flexbox

Not everyone is going to have the same screen size, so hard margins won't center it for everyone.

Also read up on padding and margin shorthand. It'll save you time instead of having to type out "margin-left, margin-right, margin-top" each time.

Here is my css for reference

Well done, keep at it!