Bootstrap - 围绕面板的白色边框

Question

所以我有这个网站，我正在研究它，它涉及它在引导板中的“主要”内容。该面板的理想宽度为670px。所以我做的是创建一个width: 670px的父级。这是我的输出：

让我如此烦恼的是，右边是一大块白色。如何解决这个问题，以免它消失？

这是我正在使用的HTML：

<div class="  panel_big">
                <div class="panel_top_orange">
  <i class="fa fa-home"></i>
                    <span>Welkom!</span>
                </div>
                <div class="panel-body">
                    Lorem ipsum
                </div>

                            </div>

我的CSS：

.panel_big {
        overflow: hidden !important; 
            border: 3.5px solid rgba(213, 220, 226, 0.9) !important;
            width:  670px;
    }

那我该怎么删除这个空格呢？我已经尝试通过为面板提供670像素的宽度来覆盖引导程序设置，但空间仍然存在...

感谢。

Answer 1

将所有内容放在此div

中

<div class="container">
...
<div>

如果您使用的是bootstrap。

Answer 2

您需要使用margin: auto将.panel_big的位置居中，最好使用宽度：100％，最大宽度为670px，当浏览器宽度小于670px时.panel_big将开始适应浏览器的宽度宽度。这是代码：

.panel_big {
  overflow: hidden !important; 
  border: 3.5px solid rgba(213, 220, 226, 0.9) !important;

  /* added code */
  width:  100%;
  max-width: 670px;
  margin: auto;
}