QR code using simple css

Replace<div class="container">with the main tag, <div class="bold"> with <h1>, <div class="para"> with <p>and <div class="attribution"> with the footer tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

Add the alt attribute alt=" " to the img tag to fix the error issue. The value of the alt attribute is the description of the image.

To center .container on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

To center .container on the page using flexbox:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

To center .container on the page using grid:
body{
min-height: 100vh;
display: grid;
place-items: center;
}

this challenge does not require a box-shadow. There is no need to give .container a margin value and the img a padding value.

replace the height in .container with a padding value for all the sides and increase the width of .container for it to be equivalent to the width of the design. .container{ width:320px; padding: 15px}. give the img a max-width of 100% instead of a width and height value.

There is no need to give h1 and p font-weight values. give h1 and p a font-size of 15px, the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Hello, Your project looks really good, well done!! Answering your question, there are some ways to center and element:

• you could remove the (padding-top: 100px;) from the body and add these lines to the container:

        position: relative;
        top: 50%;
        transform: translateY(-50%);

and to the body:

height: 100vh;

• you could remove (padding-top: 100px;) from the body and (margin: auto;) from the container, and add to the body:

   height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;