如何消除WebSocket Chat容器左右两侧的白色区域？

开发WebSocket Chat页面时，设置背景色后容器左右两侧出现白色区域。已尝试为html、body以及container标签添加背景色，但问题依然存在，怀疑和Bootstrap有关。

相关代码如下：

Chat.ejs #

<div class="container">
    <h1 class="text-center mb-4">WebSocket Chat</h1>
    <div class="input-group mb-3">
        <input id="name" type="text" class="form-control" placeholder="Enter your name" value=""/>
        <button class="btn btn-primary" type="button" onclick="saveName()"> Set Name </button>
    </div>
    <div class="input-group mb-3">
        <input id="text" type="text" class="form-control" placeholder="Enter your message">
        <button class="btn btn-primary" type="button" onclick="sendMyMessage()">Send</button>
    </div>
    <div id="messages"></div>
    <div class="row btn-container">
        <div class="col-md-12">
            <a class="btn btn-secondary" href="/">Go back to the start page</a>
        </div>
    </div>
</div>

原始CSS #

html, body{
    background-color: #222531;
}

.container {
    background-color: #222531;
    width: 100%;
    margin-top: 50px;
    color: white;

}

.form-control {
    background-color: #2e3440;
    color: white;
    border-color: #4c566a;
}

.btn-primary {
    background-color: #81a1c1;
    border-color: #81a1c1;
}

.btn-primary:hover {
    background-color: #5e81ac;
    border-color: #5e81ac;
}

/* Chat styles */
.message {
    background-color: white;
    color: #222531;
    padding-left: 10px;
    /*border-radius: 5px;*/
}

.message:last-of-type {
    margin-bottom: 0;
}

a {
    width: 100%;
    position:relative;
    margin-top: 30%;
}

问题根源有两点：

• Bootstrap默认给body设置了margin: 8px，导致页面边缘出现白色间隙
• Bootstrap的.container类自带左右内边距，且有响应式最大宽度限制，仅设置width: 100%无法让容器完全占满视口

修改CSS即可解决：

html, body{
    background-color: #222531;
    margin: 0; /* 移除body默认外边距 */
}

.container {
    background-color: #222531;
    max-width: 100%; /* 覆盖Bootstrap的max-width限制 */
    padding-left: 0; /* 移除左侧内边距 */
    padding-right: 0; /* 移除右侧内边距 */
    margin-top: 50px;
    color: white;
}

/* 以下原有样式保持不变 */
.form-control {
    background-color: #2e3440;
    color: white;
    border-color: #4c566a;
}

.btn-primary {
    background-color: #81a1c1;
    border-color: #81a1c1;
}

.btn-primary:hover {
    background-color: #5e81ac;
    border-color: #5e81ac;
}

.message {
    background-color: white;
    color: #222531;
    padding-left: 10px;
}

.message:last-of-type {
    margin-bottom: 0;
}

a {
    width: 100%;
    position:relative;
    margin-top: 30%;
}

另一种可选方案：将.container替换为Bootstrap的.container-fluid类，它默认占满视口宽度且无左右内边距，同时保留响应式布局能力。

内容的提问来源于stack exchange，提问作者elias.ant