在css中修复内容的宽度

Question

当我用chrome检查我的网页的标题类时，我注意到内容（即蓝色部分）占据了页面的整个宽度，我怎样才能使其正确的宽度

http://www.servergreek.com/

P.S我是CSS的初学者，我希望这个问题足够清楚

Answer 1

导致问题的是您的<div class="top">及其width : 100%;。删除该声明，即

.top {
  background: #1E1E1E;
  /* width: 100%; remove this */
  padding: 8px;
  color: #DDD;
  font-size: 13px;
  font-weight: 400;
}

或者更改.heading元素的填充

.heading {
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  padding: 60px 0px 60px 0px;  /* changing padding*/
}

两者都会移除水平滚动条，而不会破坏布局的任何其他部分。

Answer 2

这是正常的。由于您正在使用带有类标题的块元素，因此默认情况下它将占用它的父容器的全宽，并且这不是问题。

编写欢迎声明的更好方法：

HTML

<div class="heading">
   <h2>WELCOME TO 
   <span class="name"><span class="red">YT </span> ENGINE</span></h2>
</div>

CSS

.heading {
   text-align: center;
   line-height: 1.4;
   font-family: Arial;
}

.name {
   display: block;
}

.red {
   color: red;
}

直播结果：http://jsfiddle.net/no9p361j/