Order summary page with HTML and CSS

1. There are several html errors , div tags are not closed properly, br tags are not close properly

• always start with creating opening and ending tags e.g <div></div>, so you won't have to worry about it later.

2 . one of the best way to start building layout is to plan it. Do it in your mind or draw it down . once you get hang of it, you'll feel much more confident when you're building new layout.

for general idea -> suppose i want to create a card like the challenge

i would do ->

<section class="card-container">
  <div class="header-image-hero">
  </div>
  <div class="text-content">
       
     <div class="plan">
     </div>
     <button></button>
  </div>
</section>

you get the idea.

3 . ways to center div in mid of screen

• margin: auto;

• display: flex; justify-content: center; align-item: center;

You should use css flexbox , start with simple flex, you'll get it eventually. it'll make your layout lot easier.

for width ->

• you can set button width: 100%; so it'll expand to width of it's container e.g. take example from above

.text-content { //parent for button and plan
 width: 10rem;
}

button { // direct child of text-content
 width: 100%;  
}

.plan { // is direct child of text-content
 width:100%; 
}

you can also use flexbox to do this.

4 . imo table is good but old. use flexbox and css grid. and using positioning a lot makes a code hard to maintain. but as long as you don't mess things up, its fine.

Thanks so much!

Hey Linea,

the div you find missing is faulty as you used a closing tag </div> when you actually intended to use an opening one.

There are many ways to center the 'main' div, my preferred choice is to use flexboxes (https://css-tricks.com/snippets/css/a-guide-to-flexbox/ might help you big time). Same goes actually for the positioning of the annual plan div, but as I said there are 1000 ways and it is up to you to find the one that fits your needs and style best.