Flexbox CSS

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
  }

  body {
      font-family: poppins;
  }

  ul, nav {
      list-style: none;
  }

  a {
      text-decoration: none;
      cursor: pointer;
      color: inherit;
  }

  header {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #000;
      padding: 35px 100px 0px;
  }

  header h2 {
      text-transform: uppercase;
  }

  header nav {
      display: flex;
  }

  header nav li {
      margin: 0 15px;
  }

  header nav li:first-child {
      margin-left: 0px;
  }

  header nav li:last-child {
    margin-right: 0px;
}

@media(max-width: 1000px) {
    header {
        padding: 20px 50px;
    }
}

@media(max-width: 700px){
    header {
        flex-direction: column;
    }

    header h2 {
        margin-bottom: 15px;
    }

    header nav li {
        margin:0px 7px;
    }
}

/* Banner Area */

section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 110px 100px;
}