Break The Limits - Oprek Theme Bisnis EP

Memastikan #main-content dan #main memiliki lebar 100%:

1. Pastikan Margin dan Padding Nol di Elemen Induk: Pastikan tidak ada margin atau padding di elemen induk yang mempengaruhi lebar.

2. Tentukan Box-Sizing: Gunakan box-sizing: border-box; untuk memastikan padding tidak menambah lebar elemen.

3. Cek Elemen Induk: Pastikan elemen induk dari #main-content dan #main tidak memiliki lebar atau margin yang membatasi lebar anaknya.

Berikut adalah modifikasi kode CSS:

<style>  
  /* Sembunyikan header */
  #header,
  #sidebar,
  #footer,
  .entry-title {
    display: none;
  }        

  /* Lebarkan konten utama */
  #main-content {
    width: 100%;
    padding: 0;
    box-sizing: border-box; /* Tambahkan ini */
  }

  /* Atur margin konten utama */
  #main {
    margin: 0 auto;
    padding: 20px;
    width: 100%; /* Tambahkan ini */
    box-sizing: border-box; /* Tambahkan ini */
  }

  .hero-section {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgyRCpask8MYZizRpZWsb7IbEvKNw5Qe1l3XBqAR9VddIgiIRc4CdaCr-bc9_pg9nC8uMQ1_HKI9pATOi8lWEpNty2sScwg1wib9LebW_ivY51b6XIjfl57MX0EOlLC9H9i93CMGRZFWWSU8L-mJCo7piqpfRBodhfnwK8bwEQNGZ0hsl4YnRfIf_KCqTR/s1600/ekslusive%20printing.jpeg') no-repeat center center;
    background-size: cover;
    color: white;
    text-align: center;
    padding: 100px 0;
    margin: 10px 0;
    border-radius: 20px;
  }
  
  .service-icon {
    font-size: 3em;
    color: #FF6347; /* Warna oranye sesuai dengan tema fashion */
  }
  
  .service-card {
    border: none;
  }
  
  .floating-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    background: rgba(255, 99, 71, 0.5);
    border-radius: 25px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    z-index: 1000;
  }
  
  .floating-menu a {
    color: white;
    text-decoration: none;
  }
  
  @media (max-width: 1200px) {
    .floating-menu {
      width: 60%;
    }
  }
  
  @media (max-width: 992px) {
    .floating-menu {
      width: 70%;
    }
  }
  
  @media (max-width: 768px) {
    .floating-menu {
      width: 80%;
    }
  }
  
  @media (max-width: 576px) {
    .floating-menu {
      width: 90%;
    }
  }
  
  .about-image {
    float: left;
    margin-right: 20px;
    border-radius: 25px;
    overflow: hidden;
  }
</style>

Copy

EP Note:

• Box-Sizing: Properti box-sizing: border-box; memastikan bahwa padding dan border tidak menambah lebar total elemen. Ini membantu elemen untuk tetap berada dalam batas lebar yang ditentukan (width: 100%).
• Width pada #main: Menambahkan width: 100%; ke elemen #main memastikan elemen ini juga mengambil lebar penuh dari container induknya.

Dengan penyesuaian ini, #main-content dan #main memiliki lebar 100% seperti floating-menu.