Element position in CSS - responsive

Question

The problem is I can't move the image after nav bar element. I was working on responsive images, in fact scaling is ok, but when I inspect website on phone mode half of the picture in under nav bar. I have tried to use position: relative; and "top" property. I am still confused about how @media screen works.

html {
  scroll-behavior: smooth;
}

*,
 ::after,
 ::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: grey;
  color: black;
  line-height: 1.5;
  font-size: 1.2em;
}

.carousel img {
  width: 100%;
  height: auto;
  background-size: cover;
  -moz-background-size: cover;
  background-position: center;
}

nav {
  background: white;
  padding: 1rem 1.5rem;
  color: black;
  z-index: 10;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

.logo2 {
  font-size: 3.3em;
  font-family: "Microsoft JhengHei UI";
  color: rgb(0, 0, 0);
}

@media screen and (min-width: 800px) {
  nav {
    background: transparent;
  }
  .nav-center {
    width: 90vw;
    max-width: 1300px;
    margin-left: 0;
    margin-right: 0;
    display: flex;
  }
}

<header id="home">
  <!-- navbar -->
  <nav id="nav">
    <div class="nav-center">
      <!-- nav header -->
      <div class="nav-header">
        <a href="index.html" class="logo2">name</a>
      </div>
      <!-- links -->
      <div class="links-container">
        <ul class="links">
          <li>
            <a href="route.html">route</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- banner -->
  <div class="carousel">
    <img src="css/main_2.jpg" alt="">

    <div class="txt_box">
    </div>
  </div>
</header>

Answer 1

I fiexed the problem

.carousel img{
    object-fit: cover;
    width: 100vw;
    height: 100%; 
    margin-top: 112px;
}

@media screen and (min-width: 1059px) {

  .carousel img{
    margin-top: 0px;
}

html {
  scroll-behavior: smooth;
}

*,
 ::after,
 ::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: grey;
  color: black;
  line-height: 1.5;
  font-size: 1.2em;
}

.carousel img {
  width: 100%;
  height: auto;
  background-size: cover;
  -moz-background-size: cover;
  background-position: center;
}

nav {
  background: white;
  padding: 1rem 1.5rem;
  color: black;
  z-index: 10;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

.logo2 {
  font-size: 3.3em;
  font-family: "Microsoft JhengHei UI";
  color: rgb(0, 0, 0);
}

@media screen and (min-width: 800px) {
  nav {
    background: transparent;
  }
  .nav-center {
    width: 90vw;
    max-width: 1300px;
    margin-left: 0;
    margin-right: 0;
    display: flex;
  }
}

<header id="home">
  <!-- navbar -->
  <nav id="nav">
    <div class="nav-center">
      <!-- nav header -->
      <div class="nav-header">
        <a href="index.html" class="logo2">name</a>
      </div>
      <!-- links -->
      <div class="links-container">
        <ul class="links">
          <li>
            <a href="route.html">route</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- banner -->
  <div class="carousel">
    <img src="css/main_2.jpg" alt="">

    <div class="txt_box">
    </div>
  </div>
</header>