When the page is enlarged, the background on the right becomes white.

problem: after the page is enlarged, the scroll bar slides to the far right, and the background is all white

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title> -  MIX 3 8 6 Pro </title>
  <link rel="shortcut icon" href="https://www.mi.com/favicon.ico" />
  <link rel="stylesheet" href="css/style.css" />
</head>

<body>
  <!--  -->
  <div class="topbar">
    <!--  -->
    <div class="container">
      <!--  -->
      <div class="topbar-nav">
        <a href="-sharp"></a> <span>|</span>
        <a href="-sharp">MIUI</a><span>|</span>
        <a href="-sharp">IoT</a><span>|</span>
        <a href="-sharp"></a><span>|</span>
        <a href="-sharp"></a> <span>|</span>
        <a href="-sharp"></a><span>|</span>
        <a href="-sharp"></a><span>|</span>
        <a href="-sharp"></a><span>|</span>
        <a href="-sharp"> app</a> <span>|</span>
        <a href="-sharp">Select Region</a><span>|</span>
      </div>
      <!--  Over -->

      <!--  -->
      <div class="topbar-cart">
        <a href="-sharp"><span>(0)</span></a>
      </div>
      <!--  Over -->

      <!--  -->
      <div class="topbar-info">
        <a href="-sharp"></a><span>|</span>
        <a href="-sharp"></a><span>|</span>
        <a href="-sharp" class="sep"></a><span>|</span>
      </div>
      <!--  Over -->
    </div>
    <!--  Over -->
  </div>
  <!--   Over -->
</body>

</html>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
    "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  height: 8000px;
}
a {
  text-decoration: none;
}

.topbar {
  background: -sharp333333;
}

.container {
  width: 1226px;
  /*  */
  margin: 0 auto;
}

.container::before,
.container::after {
  content: "";
  display: table;
}

.container::after {
  clear: both;
}

.topbar a {
  color: -sharpb0b0b0;
  font-size: 12px;
}

.topbar a:hover {
  color: white;
}

.topbar-nav {
  height: 40px;
  line-height: 40px;
  float: left;
  font-size: 0px;
}

.topbar-nav span {
  font-size: 12px;
  color: -sharp424242;
  font-family: sans-serif;
  margin: 0.5em;
}

.topbar-info,
.topbar-cart {
  float: right;
}

.topbar-cart a {
  display: block;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 120px;
  background-color: -sharp424242;
}

.topbar-cart a:hover {
  color: -sharpff6700;
  background-color: -sharpfff;
}

.topbar-cart span {
  font-size: 12px;
  margin-left: -4px;
}

.topbar-info a {
  float: left;
  padding: 0px 5px;
  height: 40px;
  line-height: 40px;
}

.topbar-info {
  margin-right: 15px;
}

.topbar-info span {
  float: left;
  font-family: sans-serif;
  color: -sharp424242;
  height: 40px;
  line-height: 40px;
}

.topbar-info .sep {
  padding: 0 10px;
}