Order-Summary second-solution using HTML and CSS

Hello Julia Fidison MAHANDRISOA ! Congo 👏 on completing this challenge

Let's look at some of your issues, shall we:

• Add Main tag after body <main class="container"></main>

• To center the card vertically

max-height: 100vh;
display: flex;
justify-content: center
align-item: center;

or use this method 👇

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

• Learn more on accessibility issues

happy Coding😀

Hey! Here are some fixes I would suggest you apply on your project.

• Media query on mobile; You should add a media query for smaller screen sizes, maybe you can change the width or the spacing of the elements in the container element.

• Centering; To perfectly center your container over the body you can use positon absolute, like so -

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

• Background; Css backgrounds are super powerful! You can set background-repeat to no-repeat

• Semantic html; Semtantic html makes your code easier to read for both you, and someone looking at your code. semantic html is basically.

  <article>
   <h2> Title </h2>
   <p> Blah blah </p>
   </article>
  

is better and more redable than just putting everything inside a div. For more info You can check this out or you can check some of my projects out to see it in practice.