I have the following html code:
<div class="main-content">
            
            <div id="body-page">
                <style>
  /* Categories horizontal scroll container */
  .categories {
    display: flex;
    overflow-x: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }
  .categories::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
  }

  .category-item {
    flex: 0 0 auto;
    background: #121535;
    color: white;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: none;
  }
  .category-item:hover, .category-item:focus {
    background: #0056b3;
    outline: none;
  }

  /* Articles list */
  .articles {
    margin-top: .25rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
  }

  /* Each article item */
  article.article-item {
    display: flex;
    gap: 1rem;
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    align-items: flex-start;
    position: relative;
  }

  /* Thumbnail image */
  .article-item img.thumbnail {
    width: 100px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
  }

  /* Article details container */
  .article-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 70px; /* to align bottom metas properly */
  }

  /* Top row inside details (title and published date container) */
  .top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .article-title {
    font-size: 1rem;
    font-weight: bold;
    margin: 0;
    flex: 1 1 auto;
    padding-right: 1rem; /* spacing for date */
  }

  /* Published date top right */
  .published-date {
    font-size: 0.875rem;
    color: #999;
    flex-shrink: 0;
    white-space: nowrap;
    
  }

  /* Bottom row - categories and tags */
  .bottom-row {
    margin-top: 0.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .article-categories, .article-tags {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
  }

  /* Category pills style */
  .article-categories span {
    background: #cce5ff;
    color: #004085;
    border-radius: 12px;
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    display: inline-block;
  }

  /* Tag pills style */
  .article-tags span {
    background: #d4edda;
    color: #155724;
    border-radius: 12px;
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    display: inline-block;
  }

  /* Responsive adjustments */

  /* Tablet: 600px and up */
  @media (min-width: 600px) {
    .article-item img.thumbnail {
      width: 140px;
      height: 100px;
    }
    .article-title {
      font-size: 1.1rem;
    }
    .published-date {
      font-size: 0.95rem;
    }
  }

  /* Desktop: 900px and up */
  @media (min-width: 900px) {
    .article-item img.thumbnail {
      width: 160px;
      height: 110px;
    }
    .article-title {
      font-size: 1.25rem;
    }
    .published-date {
      font-size: 1rem;
    }
  }
</style>
<!-- ========================= Breadcrumb Start =============================== -->
 
<div class="breadcrumb mb-0 py-26 bg-color-one">
    <div class="container container-lg">
        <div class="breadcrumb-wrapper flex-between flex-wrap gap-16">
            <h6 class="mb-0">文章</h6>
            <ul class="flex-align gap-8 flex-wrap">
                <li class="text-sm">
                    <a href="https://yymart.com.hk/" class="text-main-600 flex-align gap-8">
                        <i class="ph ph-house"></i>
                        主頁
                    </a>
                </li>
                <li class="flex-align text-gray-500">
                    <i class="ph ph-caret-right"></i>
                </li>
                <li class="text-sm text-neutral-600">
                    文章
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- ========================= Breadcrumb End =============================== -->


    <!-- Categories horizontal scroll list -->
    <nav class="categories" aria-label="Article categories">
    <button class="category-item" type="button">All</button>
    <button class="category-item" type="button">Technology</button>
    <button class="category-item" type="button">Health</button>
    <button class="category-item" type="button">Science</button>
    <button class="category-item" type="button">Business</button>
    <button class="category-item" type="button">Travel</button>
    <button class="category-item" type="button">Education</button>
    <button class="category-item" type="button">Sports</button>
    <button class="category-item" type="button">Entertainment</button>
    <button class="category-item" type="button">Lifestyle</button>
    </nav>
<div class="container container-lg">
    <!-- Articles list -->
    <section class="articles" aria-label="Article list">
    <article class="article-item">
        <img src="https://picsum.photos/200/300" alt="Article thumbnail" class="thumbnail">
        <div class="article-details">
        <div class="top-row">
            <h2 class="article-title">How Technology is Changing the Modern World</h2>
            <time class="published-date" datetime="2024-06-15">2024-06-15</time>
        </div>
        <div class="bottom-row">
            <div class="article-categories" aria-label="Categories">
            <span>Technology</span><span>Science</span>
            </div>
            <div class="article-tags" aria-label="Tags">
            <span>AI</span><span>Innovation</span><span>Future</span>
            </div>
        </div>
        </div>
    </article>

    <article class="article-item">
        <img src="https://picsum.photos/200/300" alt="Article thumbnail" class="thumbnail">
        <div class="article-details">
        <div class="top-row">
            <h2 class="article-title">10 Tips for a Healthy Lifestyle</h2>
            <time class="published-date" datetime="2024-05-20">2024-05-20</time>
        </div>
        <div class="bottom-row">
            <div class="article-categories" aria-label="Categories">
            <span>Health</span><span>Lifestyle</span>
            </div>
            <div class="article-tags" aria-label="Tags">
            <span>Wellness</span><span>Nutrition</span>
            </div>
        </div>
        </div>
    </article>
    
    <article class="article-item">
        <img src="https://picsum.photos/200/300" alt="Article thumbnail" class="thumbnail">
        <div class="article-details">
        <div class="top-row">
            <h2 class="article-title">Exploring the Wonders of Space Travel</h2>
            <time class="published-date" datetime="2024-04-10">2024-04-10</time>
        </div>
        <div class="bottom-row">
            <div class="article-categories" aria-label="Categories">
            <span>Science</span><span>Travel</span>
            </div>
            <div class="article-tags" aria-label="Tags">
            <span>Space</span><span>Exploration</span>
            </div>
        </div>
        </div>
    </article>
    
    <!-- Add more article items as needed -->
    </section>
</div>            </div>
        </div>

I want to make the nav of categories fit the whole page width, how can?