Responsive Web Design Problems [closed]

I am having a problem while developing my page according to responsive web design. The problem is that there is no problem when I adjust the page for small screens, but when I edit the image on horizontal screens, the codes are also affecting the basic image for computers.

@media only screen and (orientation: landscape) {
  nav a {
    font-size: 0.85rem;
    line-height: 2rem;
    width: 20%;
  }
  .scroller:after {
    content: "";
  }
  h2 {
    font-size: xx-large;
  }
  nav:after {
    background: linear-gradient(
      90deg,
      var(--sect1) 0 calc(20vw - 3px),
      var(--sect2) 0 calc(40vw - 3px),
      var(--sect3) 0 calc(60vw - 3px),
      var(--sect4) 0 calc(80vw - 3px),
      var(--sect5) 0 150vw
    );
  }
  section {
    height: 125vh;
  }
}

You can see the code that explodes the system above.

@media only screen and (max-width: 580px) and (orientation: landscape)

Like the code above , The error persists when I combine the small screen and landscape screen codes.

If you want to review or correct it, the codes are available as comments in the css file.

Website_url

Github_repo_url

Github_issues_url

What am i waiting for:

My site looks smooth horizontally according to responsive web designs and I can add the following line to the code.

@media only screen and (max-width: 580px) and (orientation: landscape)