Margin-top tidak berfungsi

saya membuat html seperti ini

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <!-- font -->

    <link href="https://fonts.googleapis.com/css2?family=Viga&display=swap" rel="stylesheet">

    <!-- My css -->
    <link rel="stylesheet" href="style.css">

    <title>Yuda Yuda</title>
  </head>
  <body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light ">
      <div class="container">

          <a class="navbar-brand" href="#">Toko Murah</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav ml-auto">
              <a class="nav-link" href="#">Home</a>
              <a class="nav-link" href="#">Pricing</a>
              <a class="nav-link" href="#">Features</a>
              <a class="nav-link" href="#">About</a>
              <a class=" btn btn-primary tombol" href="#">Join Us</a>
            </div>
          </div>

      </div>
    </nav>
    <!-- Akhir Navbar -->

    <!-- Jumbotron -->

    <div class="jumbotron jumbotron-fluid">
      <div class="container">
          <h1 class="display-4 judul">Get work done faster and better with us</h1>

      </div>
    </div>

    <!-- AKhir Jumbotron -->

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
  </body>
</html>

dan css seperti ini

/* Navbar */
.ml-auto{
    margin-left: auto;
}

.navbar-brand{
    font-family: 'Viga', sans-serif;
    font-size: 32px;
}

/* Jumbotron */
.jumbotron{
    background-image: url(img/jumbotron-bg.jpg);
    background-size: cover;
    height: 640px;

}

h1, .judul{
    color: white;
    text-align: center;
    margin-top: 150px;
}

/* Utility */
.tombol{
    text-transform: uppercase;
    border-radius: 40px;
}

/* DEKSTOP VERSION */
@media (min-width: 992px) {
    .navbar-brand, .nav-link{
        color: white !important;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
    }

    .nav-link{
        text-transform: uppercase;
        margin-right: 30px;
    }

    .nav-link:hover::after{
        content: "";
        display: block;
        border-bottom: 3px solid #0b63dc;
        width: 50%;
        margin: auto;
        padding-bottom: 5px;
        margin-bottom: -8px;
    }

    .jumbotron{
        margin-top: -75px !important;
    }
}

setelah saya memberi margin top di h1 kenapa margin top di .jumbotron dan malah ikut turun ya?mohon pencerahanya

html css

@yudayuda

8 Kontribusi 4 Poin

Diperbarui 3 tahun yang lalu

1 Jawaban:

Jawaban Terpilih

<div>daripada pakai margin, mungkin bisa pakai padding<br><br><figure data-trix-attachment="{"contentType":"image/png","filename":"sk_yudayuda__margin_top.png","filesize":30171,"height":364,"url":"https://i.ibb.co/12TkNrt/sk-yudayuda-margin-top.png","width":622}" data-trix-content-type="image/png" data-trix-attributes="{"caption":"menggunakan padding","presentation":"gallery"}" class="attachment attachment--preview attachment--png"><img src="https://i.ibb.co/12TkNrt/sk-yudayuda-margin-top.png" width="622" height="364"><figcaption class="attachment__caption attachment__caption--edited">menggunakan padding</figcaption></figure></div>

@soeleman

120 Kontribusi 147 Poin

Dipost 3 tahun yang lalu

Tanggapan

Terima Kasih, Anda sangat membantu

@yudayuda

Kelas Premium! Belajar bikin website dari nol sekarang

Margin-top tidak berfungsi

Kelas Premium!
Belajar bikin website dari nol sekarang