表位于div外部的css问题

我无法为我的表管理css，我尝试了不同的方法但没有成功

正如你所看到的，桌子在我的房间外面

我要找的是：

该表必须位于我的“Logs”分区内

数据必须显示在一行中（我认为这样做）

div“Logs”必须位于屏幕中央（因为表的开头太靠右）

这里是一个带有数据样本的图像

我正在使用dataTable作为我的表

我的css代码：

    table.blueTable {
        font-family: "Lucida Console", Monaco, monospace;
        border: 4px solid #555252;
        background-color: #E8E8E9;
        text-align: center;
        border-collapse: collapse;
    }

    table.blueTable td, table.blueTable th {
        border: 1px solid #555555;
    }

    table.blueTable tbody td {
        font-size: 12px;
    }

    table.blueTable thead {
        background: #494949;
        border-bottom: 4px solid #0D1F24;
    }

    table.blueTable thead th {
        font-weight: bold;
        color: #FFFFFF;
        text-align: center;
        border-left: 2px solid #050C0E;
    }

    table.blueTable thead th:first-child {
        border-left: none;
    }

    table.blueTable tfoot td {
        font-size: 13px;
    }

    table.blueTable tfoot .links {
        text-align: right;
    }

    table.blueTable tfoot .links a {
        display: inline-block;
        background: #FFFFFF;
        color: #398AA4;
        padding: 2px 8px;
        border-radius: 5px;
    }

日志
用户识别码
用户名称
用户
用户发送电子邮件
罗莱德
活跃的
创建于
更新地址
更新人
$（文档）.ready（函数（）{
$（'#blueTable'）.dataTable({
“iDisplayLength”：-1//显示所有行
});
})

要解决此问题，关键是使用

class=“container fluid”

---

我的错我找到了解决方案

    <main role="main" class="container">
        <div class="card" style="width:100%">
            <div class="card-header">
                <h3 class='text-center'><i class="fab fa-reddit mr-2"></i>Logs</h3>
            </div>
            <div class="card-body pr-2 pl-2">
                <table class="blueTable table-striped table-bordered" id="blueTable" style="white-space:nowrap;width:100%;">
                    <thead>
                        <tr>
                            <th>users_id</th>
                            <th>users_name</th>
                            <th>users_uid</th>
                            <th>users_email</th>
                            <th>roleid</th>
                            <th>isActive</th>
                            <th>created_at</th>
                            <th>updated_at</th>
                            <th>updated_by</th>
                        </tr>
                    </thead>
                    <tbody>

                        <?php
                        $getProfile = getProfile($conn, $_SESSION["users_id"]);
                        $allUsers = selectAllUsers($conn);

                        if ($allUsers) {
                            foreach ($allUsers as $key) {
                        ?>
                                <tr>
                                    <td class="block" style="width:auto"><?php echo $key["users_id"] ?></td>
                                    <td class="block" style="width:auto"><?php echo $key["users_name"] ?></td>
                                    <td class="block" style="width:auto"><?php echo $key["users_uid"] ?></td>
                                    <td class="block" style="width:auto"><?php echo $key["users_email"] ?></td>
                                    <td class="block" style="width:auto"><?php echo $key["roleid"] ?></td>
                                    <td class="block" style="width:auto"><?php echo $key["isActive"] ?></td>
                                    <td class="block" style="width:auto"><?php echo $key["created_at"] ?></td>
                                    <td class="block" style="width:auto"><?php echo $key["updated_at"] ?></td>
                                    <td class="block" style="width:auto"><?php echo $key["updated_by"] ?></td>
                                </tr>
                        <?php
                            }
                        }
                        ?>
                    </tbody>
                    </tr>
                </table>
            </div>
        </div>
    </main>

    <!-- Jquery script -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery.dataTables.min.js"></script>
    <script src="assets/js/dataTables.bootstrap4.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#blueTable').dataTable({
                "iDisplayLength": -1 // to display all rows
            });
        })
    </script>