Merhabalar, videoda göründüğü üzere sayfamda ufak bir sorun var. Sayfada yakınlaştırmayı %100 yapınca container taşıyor, ama bunu %90'a düşürdüğümde veya %110'a yükselttiğimde taşma problemi düzeliyor. Nasıl düzeltebilirim?

CSS:

<style>
    body {
      font-family: 'Arial', sans-serif;
      margin: 0;
      padding: 0;
      display: flex;
      min-height: 120vh;
    }

    #nav-bar {
      position: fixed;
      background-color: rgba(0, 0, 0, 0.1);
      color: #fff;
      width: 250px;
      height: calc(100% - 120px);
      top: 120px;
      left: 0;
      overflow-y: auto;
      padding-top: 20px;
      transition: transform 0.3s ease-in-out;
    }

    #hamburger {
      position: fixed;
      top: 15px;
      left: 15px;
      background: #343a40;
      color: #fff;
      border: none;
      padding: 10px;
      border-radius: 6px;
      cursor: pointer;
      z-index: 1000;
      display: none;
    }

    #nav-title {
      font-size: 1.5rem;
      font-weight: bold;
      text-align: center;
      display: block;
      color: #343a40;
      text-decoration: none;
      margin-bottom: 20px;
    }

    .nav-button a {
      display: block;
      padding: 10px 20px;
      color: #ccc;
      text-decoration: none;
      transition: background 0.3s, color 0.3s;
    }

    .nav-button a:hover, .nav-button a.active {
      background-color: rgb(255 255 255 / 15%);
      color: #fff;
    }

    .container {
      margin-left: 230px;
      padding: 20px;
      flex: 1;
      color: rgba(0, 0, 0, 0.1);
    }

    main.content {
      background-color: rgba(0, 0, 0, 0.1);
      padding: 20px;
      border-radius: 8px;
      word-wrap: break-word; /* Uzun metinler taşmasın */
      overflow-wrap: break-word;
      box-sizing: border-box;
    }

    article h2 {
      font-size: 1.5rem;
      color: white;
    }

    article div {
      font-size: 1rem;
      line-height: 1.6;
      white-space: pre-wrap;
    }

    @media (max-width: 991px) {
      #nav-bar {
        transform: translateX(-100%);
      }

      #nav-bar.active {
        transform: translateX(0);
      }

      #hamburger {
        display: block;
      }

      .container {
        margin-left: 0;
      }
    }
     #search {
        background-color: rgba(0, 0, 0, 0.1); /* Arka plan rengi */
        color: #333; /* Yazı rengi */
        border: 1px solid #ccc; /* Kenar rengi */
        padding: 10px;
        border-radius: 5px; /* Köşeleri yuvarlama */
      }
    
      /* Input alanı odaklanınca (aktif olunca) */
      #search:focus {
        background-color: rgba(0, 0, 0, 0.1); /* Odaklanınca arka plan rengi */
        color: #000; /* Yazı rengi */
        border-color: #ffffff; /* Kenar rengi */
        outline: none; /* Varsayılan mavi çerçeveyi kaldırır */
      }
    
      /* Placeholder rengini değiştirme */
      #search::placeholder {
        color: #888; /* Placeholder yazı rengi */
      }
</style>

HTML:

  <button id="hamburger"><i class="fas fa-bars"></i></button>
  <div id="nav-bar">
    <div id="nav-header">
      <a id="nav-title" href="#" style="color: white;">Kategoriler</a>
    </div>

    <div id="nav-content">
      <?php foreach ($categories as $category): ?>
        <div class="nav-button">
          <a href="rolkitapcigi?category_id=<?= $category['id'] ?>" 
             class="<?= $currentCategoryId == $category['id'] ? 'active' : '' ?>">
            <i class="fas fa-folder"></i><span> <?= htmlspecialchars($category['name']) ?></span>
          </a>
        </div>
      <?php endforeach; ?>
    </div>

  </div>

  <div class="container">
    <main class="content">
      <header>
        <h1 style="color: white;"><strong><?= htmlspecialchars($categories[array_search($currentCategoryId, array_column($categories, 'id'))]['name']) ?></strong></h1>
        <input type="text" id="search" placeholder="Ara...">
      </header>
      
      <?php foreach ($contents as $content): ?>
        <article>
          <h2 style="color: white;"><strong><?= htmlspecialchars($content['title']) ?></strong></h2>
          <div style="color: white;"><?= htmlspecialchars($content['content']) ?></div>
        </article>
      <?php endforeach; ?>
    </main>
  </div>