Html 将所有元素居中到一定宽度

我试着把所有的东西放在中间，占到页面的80%。一切似乎都很好，除了我的两个主要div在我的横幅和导航栏上延伸了大约1px，尽管它们被设置为80%

以下是CSS：

正文{
背景：url（'bg.png'）；
背景尺寸：封面；
背景重复：无；
}
.横幅{
字体系列：“Raleway”，无衬线；
颜色：#F2F2；
边缘顶部：20px；
文本对齐：居中；
背景：url（'bg.jpg'）不重复；
背景尺寸：封面；
背景位置：中心；
线高：120px；
字体大小：40px；
文本阴影：2px2px2px黑色；
宽度：80%；
高度：120px；
保证金：0自动；
}
.关于{
背景色：#333；
不透明度：0.8；
显示：内联块；
垂直对齐：顶部；
文本对齐：居中；
宽度：60%；
高度：300px；
字体系列：“Raleway”，无衬线；
颜色：白色；
}
.统计数据{
背景色：#333；
不透明度：0.8；
显示：内联块；
垂直对齐：顶部；
文本对齐：居中；
宽度：20%；
高度：300px；
字体系列：“Raleway”，无衬线；
颜色：白色；
}
.标志{
边缘顶部：50px；
字体系列：myFirstFont；
颜色：白色；
文本对齐：居中；
字体大小：50px；
}
托普纳夫先生{
背景色：#333；
溢出：隐藏；
宽度：80%；
保证金：0自动；
}

王国MC
10个玩家中有7个在线！


Lorem ipsum
dolor sit amet
Lorem ipsum
dolor sit amet

您没有提到forwrapperdiv，因此它被分配了100%的可用宽度，其中的div将相应地采用宽度

尝试将大约div的宽度减小到59%，如下所示，这将使两个div位于宽度范围的80%之内：

.about {
  background-color: #333;
  opacity: 0.8;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  width: 59%;
  height: 300px;
  font-family: 'Raleway', sans-serif;
  color: white;
}

这是一把小提琴：

---

或者，您可以像设置topnavdiv那样设置包装器的宽度，然后相应地设置内部div的宽度

这似乎很管用

正文{
背景：url（'bg.png'）；
背景尺寸：封面；
背景重复：无；
}
.横幅{
字体系列：“Raleway”，无衬线；
颜色：#F2F2；
边缘顶部：20px；
文本对齐：居中；
背景：url（'bg.jpg'）不重复；
背景尺寸：封面；
背景位置：中心；
线高：120px；
字体大小：40px；
文本阴影：2px2px2px黑色；
宽度：80%；
高度：120px；
保证金：0自动；
}
.关于{
背景色：#333；
不透明度：0.8；
显示：内联块；
垂直对齐：顶部；
文本对齐：居中；
宽度：60%；
高度：300px；
字体系列：“Raleway”，无衬线；
颜色：白色；
}
.统计数据{
背景色：#333；
不透明度：0.8；
显示：内联块；
垂直对齐：顶部；
文本对齐：居中；
宽度：20%；
高度：300px；
字体系列：“Raleway”，无衬线；
颜色：白色；
}
.标志{
边缘顶部：50px；
字体系列：myFirstFont；
颜色：白色；
文本对齐：居中；
字体大小：50px；
}
托普纳夫先生{
背景色：#333；
溢出：隐藏；
宽度：80%；
保证金：0自动；
}

域MC
有


Lorem ipsum

多洛·希特·阿梅特
Lorem ipsum

多洛·希特·阿梅特

您必须为包装指定一个

宽度：80%

使用

float

属性代替

display:inline块

所以，像这样改变：

#wrapper {
    width: 80%;/*/<-------------------/*/
    margin: 0 auto;/*/<-------------------/*/
    box-sizing: border-box;/*/<-------------------/*/
}

.about {
  background-color: #333;
  opacity: 0.8;
  vertical-align: top;
  text-align: center;
  width: 70%;/*/<-------------------/*/
  height: 300px;
  font-family: 'Raleway', sans-serif;
  color: white;
  float: left;/*/<-------------------/*/
  /*/-------Remove display:inline-block-----------/*/
}

.stats {
  background-color: #333;
  opacity: 0.8;
  vertical-align: top;
  text-align: center;
  width: 29%;/*/<---------1% for margin-left ----------/*/
  height: 300px;
  font-family: 'Raleway', sans-serif;
  color: white;
  float: right;/*/<-------------------/*/
   /*/-------Remove display:inline-block-----------/*/
}

#包装器{
宽度：80%/*/