如何修复不需要的侧面滚动条？

Question

所以我回到了我的网站，但是这次出现了一个新问题... 现在，我正在与我的网站一起工作，因为我只有自己的布局才能意识到没有多余的侧面滚动条。我真的不知道是什么原因造成的，这简直令人沮丧。

我尝试回溯我的脚步，但是找不到。

请注意...任何显示bar的内容都只是进度条。 https://glitch.com/~triangular-trouser

var move1 = function() {}

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.m-scene {

.scene_element {
    animation-duration: .5s;
    transition-timing-function: ease-in;
    animation-fill-mode: both;

  }

  .scene_element--fadein {
    animation-name: fadeIn;
  }

  .scene_element--fadeinup {
    animation-name: fadeInUp;
  }

  .scene_element--fadeinright {
    animation-name: fadeInRight;
  }
  
  &.is-exiting {
      .scene_element {
        animation-direction: alternate-reverse;
      }
  }
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Times New Roman", Times, serif;
  padding: 0px;
  background: #ffffff;
}

.header {
  padding: 20px;
  text-align: left;
  color: #565656;
}

.header h1 {
  font-size: 50px;
  text-align: right;
  color: #565656
}

.header p {
  color: #565656
}

.fullcolumn {   
  float: left;
  width: 100%;
  font-family: "Times New Roman", Times, serif;
  background-color: #d7cec7;
}

.leftcolumn {
  float: left;
  width: 25%;
  font-family: "Times New Roman", Times, serif;
  margin-left: 10px;
  background-color: #d7cec7;
}

.rightcolumn {
  float: right;
  width: 75%;
  font-family: "Times New Roman", Times, serif;
  margin-left: -10px;
  background-color: #d7cec7;
}

.fakeimg {
  background-color: #aaa;
  width: 50%;
  height: px;
  padding: 20px;
  border-radius: 5px;
}

.card {
  padding: 20px;
  margin-top: 0px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.picalignment {
  float: left;
  width: 50%;
  padding: 5px;
}

.next::after {
  content: "";
  clear: both;
  display: table;
}

.imgfix {
  overflow: auto;
}

.imgfix::after {
  content: "";
  clear: both;
  display: table;
}

.mybiopic {
  float:left;
  margin: 10px;
}
#main {
  transition: margin-left .5s;
}

.body {
  transition: background-color .5s;
}

#myDiv {
  transition: background-color .5s;
}

#myDiv4 {
  transition: background-color .5s;
}
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

#myProgress1 {
  width: 100%;
  background-color: #ffffff;
  
}

#myBar1 {
  width: 10%;
  height: 30px;
  background-color: #C09F80;
  text-align: center;
  line-height: 30px;
  color: white;
}

#myProgress2 {
  width: 100%;
  background-color: #ffffff;
  
}

#myBar2 {
  width: 10%;
  height: 30px;
  background-color: #C09F80;
  text-align: center;
  line-height: 30px;
  color: white;
}

#myProgress3 {
  width: 100%;
  background-color: #ffffff;
  
}

#myBar3 {
  width: 10%;
  height: 30px;
  background-color: #C09F80;
  text-align: center;
  line-height: 30px;
  color: white;
}

#myProgress4 {
  width: 100%;
  background-color: #ffffff;
  
}

#myBar4 {
  width: 10%;
  height: 30px;
  background-color: #C09F80;
  text-align: center;
  line-height: 30px;
  color: white;
}

#myProgress5 {
  width: 100%;
  background-color: #ffffff;
  
}

#myBar5 {
  width: 10%;
  height: 30px;
  background-color: #C09F80;
  text-align: center;
  line-height: 30px;
  color: white;
}

#myProgress6 {
  width: 100%;
  background-color: #ffffff;
  
}

#myBar6 {
  width: 10%;
  height: 30px;
  background-color: #C09F80;
  text-align: center;
  line-height: 30px;
  color: white;
}

#myProgress7 {
  width: 100%;
  background-color: #ffffff;
  
}

#myBar7 {
  width: 10%;
  height: 30px;
  background-color: #C09F80;
  text-align: center;
  line-height: 30px;
  color: white;
}

.filler {
  background-color: #d7cec7;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Thimble Sample</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
</html>

<html>
  <div id="myDiv" class="m-scene">
    <div id="main" class="m-aside scene_element scene_element--fadein">
      <body onload="move1()" id="myDiv">
        <script src="script.js"></script>
        <div class="header" id="myDiv2">
          <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
          <h1>Digital Portfolio</h1>
          <p style="text-align: right;">Taewoo Hong</p>
        </div>
        <div class="filler row m-right-panel m-page scene_element scene_element--fadeinright" id="filler">
          <div class="leftcolumn">
            <div class="card" id="myDiv4">
              <h1 style="color: #76323F;">
                <b>Skills</b>
              </h1>
              <h2 style="color: #ffffff;">
                Adaptability
              </h2>
              <div id="myProgress1">
              <div id="myBar1">10%</div>
              </div>
              <h2 style="color: #ffffff;">
                Leadership
              </h2>
              <div id="myProgress2">
              <div id="myBar2">10%</div>
            </div>
              <h2 style="color: #ffffff;">
                Coding
              </h2>
              <div id="myProgress3">
              <div id="myBar3">10%</div>
            </div>
              <h2 style="color: #ffffff;">
                Art
              </h2>
              <div id="myProgress4">
              <div id="myBar4">10%</div>
            </div>
              <h1 style="color: #76323F;">
                <b>Languages</b>
              </h1>
              <h2 style="color: #ffffff;">
                English
              </h2>
              <div id="myProgress5">
              <div id="myBar5">10%</div>
              </div>
              <h2 style="color: #ffffff;">
                Korean
              </h2>
              <div id="myProgress6">
              <div id="myBar6">10%</div>
              </div>
              <h2 style="color: #ffffff;">
                German(basic)
              </h2>
              <div id="myProgress7">
              <div id="myBar7">10%</div>
              </div>
            </div>
          </div>
          <div class="rightcolumn">
            <div class="card" id="myDiv5">
              <h1 style="color: #76323F; text-align:right;">
                <b>Contact Information</b>
              </h1>
            </div>
          </div>
        </div>
        <div class="footer m-right-panel m-page scene_element scene_element--fadeinright" id="foot">
          <h2>Footer</h2>
        </div>

        <div id="mySidenav" class="sidenav">
          <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
          <a href="index.html">Home</a>
          <a href="index-2.html">Test</a>
          <a href="#">Clients</a>
          <a href="#">Contact</a>
        </div>

      </body>
    </div>
  </div>
</html>

Answer 1

此div的两边都有额外的负边距：

<div class="row m-page scene_element scene_element--fadeinup">

从margins类中删除两个说的row似乎可以解决问题：

.row {
  margin-left: 0; 
  margin-right:0;
}

您可以创建类似Bootstrap 4的类：

.mx-0 {
  margin-left: 0; 
  margin-right:0;
}

Answer 2

滚动条称为溢出，您可以使用它，甚至直接禁用它。 X和Y分别在x和y轴上溢出。看看这个link的家族，那里可能还有一些对您有用的东西。

.someDiv{
 overflow-x: hidden;
 overflow-y: hidden;
}