html - 容器对齐到浏览器窗口的边缘

Question

我有一个 div 与浏览器一起移动到边缘，并且想要添加与页面中心的居中容器对齐的内容。我用 col-md-6 创建了一行，并填充了背景色，但是当我添加容器时，内容会与浏览器的边缘对齐，而不是与容器的边缘对齐。

我正在使用 Bootstrap 并且真的需要你的帮助。如果我没有正确阐明问题，我附上了一张应该有帮助的图片。

感谢您的帮助。

.login-msg-box {
	background: rgba(0,0,0,0.5);
	margin-top: 200px;
	height: 400px;
}

<div class="row">
    <div class="col-md-6 login-msg-box">
        <div class="container">
            <h2 class="msg-heading-line">LOG IN</h2>
        </div>
    </div>
</div>

Image shows the current situation and the desired situation

Answer 1

当你为 .login-msg-box 做了一个 margin-top 时，你可以添加一个 margin-left 到你的 .container。这是结果:

.login-msg-box {
	background: rgba(0,0,0,0.5);
	margin-top: 200px;
	height: 400px;
}

.container {
    margin-left: 200px;
}

<div class="row">
    <div class="col-md-6 login-msg-box">
        <div class="container">
            <h2 class="msg-heading-line">LOG IN</h2>
        </div>
    </div>
</div>