Selector css tidak berfungsi pada bootstrap

saya membuat html dengan bootstrap 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>Toko Murah</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 <span>faster</span> and <span>better</span> with us</h1>
          <a href="" class="btn btn-primary tombol1">Our Work</a>
      </div>
    </div>

    <!-- AKhir Jumbotron -->
    <div class="container">

      <!-- info panel -->
      <div class="row justify-content-center">
        <div class="col-lg-10 info-panel">
          <div class="row">
            <div class="col-lg">
              <img src="img/employee.png" alt="employee" class="float-left">
              <h4>24 Hours</h4>
              <p>Lorem ipsum dolor sit amet.</p>
            </div>

            <div class="col-lg">
              <img src="img/hires.png" alt="hires" class="float-left">
              <h4>24 Hours</h4>
              <p>Lorem ipsum dolor sit amet.</p>
            </div>

            <div class="col-lg">
              <img src="img/security.png" alt="security" class="float-left">
              <h4>24 Hours</h4>
              <p>Lorem ipsum dolor sit amet.</p>
            </div>
          </div>
        </div>
      </div>
      <!-- akhir info panel -->



    </div>

    <!-- Container -->



    <!-- akhir Container -->
















    <!-- 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 */
.navbar{
    position: relative;
    z-index: 1;
}

.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: 540px;
    text-align: center;
    position: relative;
}

.jumbotron .container{
    position: relative;
    z-index: 1;
}

.jumbotron::after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
    position: absolute;
    bottom: 0;
}

h1, .judul{
    color: white;
    
    /* margin-top: 150px; */
    padding: 30vmin;
    font-weight: 200;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
    font-size: 35px;
}

.jumbotron .display-4 span{
    font-weight: 500;
}

.display-4{
    margin-bottom: -140px;
}

/* info panel */
.info-panel{
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    margin-top: -50px;
    background-color: white;
    position: relative;
    z-index: 2;
    padding: 30px;
}

.info-panel img{
    width: 80px;
    height: 80px;
    margin-right: 20px !important;
    margin-bottom: 20px;
}



/* 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;
        height: 640px;
    }


    h1, .judul{
        font-size: 62px;
    }
}


tetapi selector css yang saya gunakan seperti ini tidak berfungsi, mohon pencerahanya
.info-panel img{
    width: 80px;
    height: 80px;
    margin-right: 20px !important;
    margin-bottom: 20px;
}
avatar yudayuda

@yudayuda

6 Kontribusi 3 Poin


Jawaban Terpilih

atau bisa aja di ganti dari
.info-panel img
jadi
.col-lg img
kalau gak mau kyk gitu di element
<div class="col-lg">
dikasih lagi class buat nge style img di dalemnya CONTOH
<div class="col-lg img-style">
Jadi nanti di CSS nya
.img-style img 
avatar GHAZTHISKC119

@GHAZTHISKC119

9 Kontribusi 3 Poin

Jawaban

Coba di kasih tanda "!important" semua di setiap property-nya, agar style yang sudah ada sebelumnya diabaikan, jadi "dipaksa" untuk menggunakan style yg diberi tanda "!important", ubah kodenya jadi seperti ini :

.info-panel img{
    width: 80px !important;
    height: 80px !important;
    margin-right: 20px !important;
    margin-bottom: 20px !important;
}

Semoga membantu!
avatar ahanafi

@ahanafi

614 Kontribusi 357 Poin


sepertinya tidak ada masalah.
Browser menjalankan CSS-nya sesuai yang diharapkan.
sk-yudayuda-8080.png80px * 80px
sk-yudayuda-12080.png120px * 80px


avatar soeleman

@soeleman

100 Kontribusi 121 Poin


atau bisa aja di ganti dari
.info-panel img
jadi
.col-lg img
kalau gak mau kyk gitu di element
<div class="col-lg">
dikasih lagi class buat nge style img di dalemnya CONTOH
<div class="col-lg img-style">
Jadi nanti di CSS nya
.img-style img 
avatar GHAZTHISKC119

@GHAZTHISKC119

9 Kontribusi 3 Poin


Login untuk gabung berdiskusi