How to make navbar follow rest of the content on the page

I am developing a website with a really big table on the index page that goes beyond screen width. The problem I am facing is the navbar and one part of the table doesn't follow the table where data is placed. I have been trying to solve it for quite some time but still made 0 progress. This is a Django website with a Django template. For developing table functionality I am using Data Tables.

Table HTML:

`<table id="myTable" class="display dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Job URL</th>
      <th scope="col">Job Title</th>
      <th scope="col">Job Location</th>
      <th scope="col">Posted Date</th>
      <th scope="col">Company Name</th>
      <th scope="col">Company URL</th>
      <th scope="col">Country</th>
      <th scope="col">Postal Code</th>
      <th scope="col">Industry</th>
      <th scope="col">Founded Date</th>
      <th scope="col">Phone Number</th>
      <th scope="col">Number Of Employees</th>
    </tr>
  </thead>
  <tbody>
    {% for job in get_jobs%}
    <tr>
      <td scope="row">{{ forloop.counter }}</td>
      <td><a href="{{job.company_url}}" target="_blank">{{job.job_url}}</a></td>
      <td style="width: 100%">{{job.job_title}}</td>
      <td>{{job.job_location}}</td>
      <td>{{job.posted_date}}</td>
      <td>{{job.company_name}}</td>
      <td>
        <a
          href="{{job.company_url}}"
          target="_blank"
          id="company_url"
          data-url="{{job.company_url}}"
          data-name="{{job.company_name}}"
          >{{job.company_url}}</a
        >
      </td>
      <td>{{job.job_location}}</td>
      <td>{{job.postal_code}}</td>
      <td>{{job.industries}}</td>
      <td>{{job.found_date}}</td>
      <td>{{job.phone}}</td>
      <td>{{job.number_of_employees}}</td>
    </tr>
    {%endfor%}
  </tbody>
</table>

Table CSS:

table {
  width: 100%;
}

td {
  max-width: 100%;
  white-space: nowrap;
  padding: 10px;
}

Table JS:

$(document).ready(function () {
  $("#myTable").DataTable({
    columnDefs: [{ type: "natural", targets: "_all" }],
    order: [[3, "desc"]],
  });
});

Image of the current table, the gray area is the navbar. You can see that the navbar and one part of the table are not following the rest of the table.

Solution

you have a large table containing a substantial amount of data so you need to use scroll it will bind the x scroll of your table

<div style="overflow-x:auto;">
    <table>
        <!-- Data goes here -->
    </table>
</div>