Flex-Box and Grid system

Hey There, I see that you have some issues in your code, you have to practice more to understand every line you write.

• First of all, your code work for less than 1440px screens and that's wrong.
• you have to select a height for the body element like body { min-height: 100vh} to take the full height of screen, don't set the body to body { height: 100%}, because the body element its the parent of all the elements.
• and to center the page elements inside the body use display: flex; and the flex center properties.
• the background image have to be set by the CSS not the HTML tags, you can set the position of each image like this:

  body {
    background-image: url(/bg-pattern-top-desktop.svg), url(/bg-pattern-bottom-desktop.svg);
    background-repeat: no-repeat;
    background-position: top left, bottom right;
    /* or */
    background-position: 0% 0%, 100% 100%;
  }

• you have to set the direction of elements to column for medias that have less than 768px by flex-direction: column; or display: block;

Hope I gave you some good advices.

Enjoy with coding ❤