Bootstrap table overflows screen and navbar doesn't-CodePudding

So this is a bit of a compound question. Please keep in mind that I'm not a professional webdev. Also I did try the solutions

I've tried to boil the code down to just elements, classes and styles. Please let me know if there's anything else you'd like to see

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- ✅ load jQuery ✅ -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>

<body>
    <div id="banner_element"></div>
    <nav  style="margin-top: 10px;">             
        <button  
                type="button" 
                data-toggle="collapse" 
                data-target="#navbarDiv" 
                aria-controls="navbarDiv" 
                aria-expanded="false" 
                aria-label="Toggle navigation">
            <span ></span>
        </button>

        <div  id="navbarDiv">
            <ul >
                <li >
                    <a  href="/">Click me</a>
                </li>
            </ul>
        </div>
    </nav>
    <div  style="margin-bottom: 100px;">
        <div >
            <h1 >Page Title</h1>
        </div>
        <div style="padding-bottom: 100px;">
            <table  style="overflow-x: visible; overflow-y: visible; height: 100%;" id="myTable">
                <thead>
                    <th></th>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>
                </thead>
                <tr id='${element["Id"]}'>
                  <td><button onclick="location.href='/'">