html - 如何使主要内容位于页面中间并去除空白？

Question

请帮忙，我需要右边栏上的空白消失，主要内容的位置放在页面中间。

我该怎么办？有什么建议吗？

这是我的网站:http://www.plebonline.co.uk

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px 18px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #ea730b;
}

.clock {
  color: white;
  text-align: center;
  padding: 16px 18px;
  display: block;
}

.leftbar {
  float: left;
  background-color: #333;
  width: 10%;
  margin: 0;
  padding: 1em;
  margin-bottom: -5000px;
  padding-bottom: 5000px; 
  overflow: hidden;
}

.rightbar {
  float: right;
  background-color: #333;
  width: 10%;
  margin: 0;
  padding: 1em;
  margin-bottom: -5000px;
  padding-bottom: 5000px; 
  overflow: hidden;
}

.maincontent {
  padding: 0;
  float:left;
  margin-left: 10%;
  margin-right: 10%;
  background-color: #ff00ff;
  width: 80%;
}

<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="wip.html">Projects</a></li>
  <li><a href="wip.html">Notes</a></li>
  <li><a href="wip.html">About</a></li>
  <li><a href="wip.html">Contact</a></li>
  <li style="float:right" class="clock" id="clock"></li>
  <script>
    var today = new Date();
    document.getElementById('clock').innerHTML=today;
  </script>
</ul>

<div class="leftbar"></div>

<div class="maincontent"></div>

<div class="rightbar"></div>

Answer 1

有一个 div 标签关闭但没有打开，这可能是导致问题的原因。

改变:

<div class="leftbar"></div>

<div class="maincontent"></div>

</div>
<div class="rightbar"></div>

收件人:

 <div class="leftbar"></div>

    <div class="maincontent"></div>

    <div class="rightbar"></div>