Why is my <main></main> stacked on top of my <nav></nav>?-CodePudding

Hello there i want to ask something related to (maybe) element positioning.

So i've been stuck with this problem for a while. The and the are stacking on top of each other. Is there a efficient workaround so the will be directly under the ? And weirdly the is stuck there too.

Here's the screenshoot of it: Screenshot of the page

Here's my css and html snippet:

@-ms-viewport {
  width: device-width;
}

* {
  box-sizing: border-box;
}


/* FONT */

@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
body,
html {
  width: 100%;
  height: 100%;
  margin: auto 0;
  /*background-color: #FDE500;*/
  font-family: 'Arimo', sans-serif;
}

ul {
  list-style: none;
}

li {
  padding: 20px;
  margin: 10px;
}

h3 {
  font-family: 'Arimo', sans-serif;
  font-size: 1em;
}

.nav-container li a {
  text-decoration: none;
  color: black;
  font-family: 'Arimo', sans-serif;
  font-weight: 1000;
}


/* NAV */

.zone-nav {
  background-color: #1A1EB0;
  width: 100%;
  display: block;
}

.nav-container li a {
  color: #FDE500;
}

ul.nav-container {
  padding-left: 0;
  margin: 0 auto;
}

.nav-container {
  display: flex;
  flex-flow: row wrap;
  font-size: 1.2em;
  margin: 0;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: auto 0;
}

@media only screen and (max-width: 600px) {
  .nav-container {
    font-size: 1.3em;
    padding: 0;
    flex-flow: column wrap;
  }
}

.nav-container li a img {
  display: block;
  width: 1.5em;
  margin: 0 auto;
  margin-bottom: -10px;
}

.item-1 {
  margin: 0 auto;
  flex: 1 1 0px;
  text-align: center;
}

li.item-1 {
  padding: 30px;
}


/*.logo {
  margin: auto 0;
}*/

.item-2 {
  margin: auto 0;
  background-color: ;
}

li.item-1.logo img {
  width: 5em;
  display: block;
  margin: 0 auto;
  padding: auto 0;
}

li.item-1.logo {
  margin: auto 0;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  /*    z-index: 1;*/
}


/* MAIN */

.zone-main {
  display: flex;
  flex: 1 0 auto;
  max-width: 100%;
  background: rgb(238, 174, 202);
  background: linear-gradient(90deg, rgba(238, 174, 202, 1) 38%, rgba(148, 187, 233, 1) 100%);
}

.wrap-main {
  flex: 1 1 auto;
  max-width: 100%;
  position: relative;
}


/* FOOTER */

.zone-footer {
  background-color: #FDE500;
}

.footer-container {
  display: flex;
  flex-flow: row wrap;
  font-size: 16px;
  color: #1A1EB0;
  font-weight: 1000;
  margin: 0;
  justify-content: safe center;
  align-items: center;
  margin: auto 0;
  padding: 0 20px 0 20px;
}

.footer-item {
  margin: 0;
  padding: 10px;
  text-align: center;
}

li.footer-item-buffer {
  flex-grow: 1;
}

.push {
  margin-left: auto;
  padding: 20px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Home | P.Y.G. Headquarters</title>
  <link rel="stylesheet" type="text/css" href="style-base.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <nav class="zone-nav sticky">
    <ul class="nav-container">
      <li class="item-1">
        <a href="#"><img src="assets/img/join.png" alt="ICON I"><br>JOIN</a>
      </li>
      <li class="item-1">
        <a href="#"><img src="assets/img/home.png" alt="ICON II"><br>HOME</a>
      </li>
      <li class="item-1">
        <a href="#"><img src="assets/img/lineups.png" alt="ICON I"><br>LINEUPS</a>
      </li>
      <li class="item-1 logo"><img src="assets/img/pyg.png" alt="ICON I"></li>
      <li class="item-1">
        <a href="#"><img src="assets/img/tickets.png" alt="ICON III"><br>SCHEDULE</a>
      </li>
      <li class="item-1">
        <a href="#"><img src="assets/img/shopping-bag.png" alt="ICON IV"><br>STORE</a>
      </li>
      <li class="item-1">
        <a href="#"><img src="assets/img/link.png" alt="ICON IV"><br>LINKS</a>
      </li>
    </ul>
  </nav>
  <main class="zone-main">
    <div class="wrap-main">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </main>
  <footer class="zone-footer">
    <ul class="footer-container">
      <li class="footer-item">P.Y.G. Administrative Service - Since 2012</li>
      <li class="footer-item-buffer"></li>
      <li class="footer-item push">PRIVACY POLICY</li>
      <li class="footer-item push">HELP</li>
    </ul>
  </footer>
</body>

</html>

Thanks in advance.

CodePudding user response：

Remove the sticky css class on the nav element. The sticky css class makes your main content sticking to the top of the page.

And add the following css on the body

body {
  display:flex;
  flex-direction: column;
  height: 100%;
}

This puts all containers (nav, main, footer) under each other.