html - Google 网站内容占据了整个窗口

Question

我正在为一个学校元素开发 Google 网站。但是，该站点看起来像

而不是

我没有添加额外的东西，谷歌网站为我添加了它。有什么办法可以摆脱它吗？

.titlebox {
  display: block;
  margin: 10px;
  padding: 50px;
  background-color: yellow;
  border-radius: 10px;
  border: 2px solid black;
  text-align: center;
}
.map {
  margin: 10px;
  display: inline;
  float: left;
  padding: 20px;
  background-color: green;
  border-radius: 10px;
  border: 2px solid black;
}
.content {
  margin: 10px;
  display: inline;
  float: right;
  padding: 20px;
  background-color: orange;
  border-radius: 10px;
  border: 2px solid black;
}
a div {
  color: black;
  text-decoration: none;
  padding: 5px;
  border-radius: 10px;
  border: 2px;
}
a:hover div {
  color: orange;
  text-decoration: none;
  padding: 5px;
  border-radius: 10px;
  border: 2px;
  background-color: blue;
}

<div class="titlebox">
  <h1>GMO DEBATE</h1>
</div>
<div class="map">
  <div text-align="center">
    <h3>pages:</h3>
  </div>
  <ul>
    <li>
      <a href="pro">
        <div>why GMOs should be labeled</div>
      </a>
    </li>
    <li>
      <a href="con">
        <div>why GMOs shouldn't be labeled</div>
      </a>
    </li>
    <li>
      <a href="info">
        <div>background information</div>
      </a>
    </li>
  </ul>
</div>
<div class="content">
  <h3>Should GMOs be labeled?</h3>
</div>

那是在一个代码框中，虽然我认为这并不重要，因为在我添加任何东西之前额外的东西就已经存在了。向元素添加宽度没有帮助。

Answer 1

正如您在代码框中所说的代码框，您只能在有限的区域中显示您的内容，您只会分配给一些空间 75% 或 70 % 页面显示区域。

如果您需要整页的网站，如您所愿，可以找到一个免费的托管网站，例如 http://www.000webhost.com并托管您的网页，您可以随心所欲