Desktop Order Summary using HTML and CSS

Hi. By looking at your question and code I can tell you don't know flexbox yet. Every question you have about positioning would be solved by just using flexbox. [More on centering divs] (https://levelup.gitconnected.com/5-ways-to-center-a-div-using-css-fcd790524708) I will make a few suggestions for the rest of your code.

• The background-image needs to be set on the body and span the entire width of the body. By setting it on .background-image you limit the size of your webpage as this acts as some sort of container. It's possible you could actually even delete this <div> and set the background-image on your body.

body {
  margin: 0;
  background-color: hsl(225, 100%, 98%);
  text-align: center;
  font-family: "Red Hat Display", sans-serif;
  font-weight: 500;
  color: hsl(224, 23%, 55%);
  background-image: url(../images/pattern-background-desktop.svg);
}

• The buttons hold a lot of repetitive code. If this happens, you can actually use classes to bundle the repetition and end up writing less. Give both 'buttons' the same class .btn and give 'cancel' a second class .btn-cancel. Also give the buttons a display: block when they need to span all across the box. See also how I added auto to the margin to help center the buttons.

<a class="btn" href="">Proceed to Payment</a>
<a class="btn btn-cancel" href="#">Cancel Order</a>

In css this would eventually give you this:

.btn {
  background-color: hsl(245, 75%, 52%);
  width: 75%;
  color: white;
  border-radius: 8px;
  display: block;
  margin: 10px auto;
  padding: 13px;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover {
  background-color: hsl(225, 100%, 94%);
  color: hsl(223, 47%, 23%);
}
.btn-cancel {
  color: hsl(224, 23%, 55%);
  background-color: hsl(225, 100%, 100%);
}
.btn-cancel:hover {
  background-color: hsl(225, 100%, 94%);
}

Have a look at this and see how far it will get you. Happy coding!