如何修复 HTML 站点页面右侧奇怪的偏移？

Question

我正在使用 Repl.it 开发网站。不幸的是，我运行遇到了一个以前从未见过且似乎无法解决的问题。在示例中，如您所见，有一个带有 3 个按钮的导航栏。但是，您看不到最右边按钮的右边缘。有什么办法可以解决这个问题吗？是什么原因造成的？谢谢

代码：

@property --col1 {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(255,175,0,1);
}
@property --col2 {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(255,115,0,1);
}
html, body{
  padding: 0;
  margin: 0;
  overflow-x: hidden !important;
  border: 0;
  outline: 0;
  width: 100%;
}
body {
  font-family: myFirstFont;
  background-color: #444444;
  text-align: center;
}
.topb {

  font-family: myFirstFont;
  background-color: #444444;
  color: #ffffff;
  flex: 1;
  border: none;
 
}
.topb.lt{
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.topb.rt{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.topb:hover{
  background-color: #303030;
}
@font-face {
  font-family: myFirstFont;
  src: url(gemina.ttf);
}

.title {
  font-family: myFirstFont;
  text-align: left;
}

.para {
font-family: myFirstFont

}
#copyright {

  /*margin-top: 75vh;*/
  baackground-color: #363636;
  color:#ffffff;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;

}
#copyright-text{
  color: #ffffff;
  background-color: #363636;
}
#topbar {

background-color: #363636;
color: #ffffff;
width: 100%;
padding: 5px;
display: flex;
flex-direction: row;
}
#underconst{
  --col1: rgba(255,175,0,1);
  --col2: rgba(255,115,0,1);
  /*color: #ffae00;*/
  /*color: #ffaf00;*/
  animation: textcol 5s infinite linear alternate;
background-image: -moz-radial-gradient(circle, var(--col1) 0%, var(--col2) 100%);
background-image: -webkit-radial-gradient(circle, var(--col1) 0%, var(--col2) 100%);
background-image: radial-gradient(circle, var(--col1) 0%, var(--col2) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@keyframes textcol{
  /*
  0%{--col1: rgba(255,175,0,1); --col2: rgba(255,115,0,1)};
  50%{--col1: rgba(255,115,0,1); --col2: rgba(255,175,0,1)};
  100%{--col1: rgba(255,175,0,1); --col2: rgba(255,115,0,1)};
  */
  
  0%{--col1: rgba(255,115,0,1); --col2: rgba(255,175,0,1)};
  50%{--col1: rgba(255,175,0,1); --col2: rgba(255,115,0,1)};
  100%{--col1: rgba(255,115,0,1); --col2: rgba(255,175,0,1)};
  
}

<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="title">
<h1>PRODUCTION</h1>
</div>
<div id="topbar">
  <button class="topb lt">HOME</button>
  <button class="topb">ABOUT</button>
  <button class="topb rt">ONLINE COMPETITON</button>
</div>
<br>
<br>
<h1 id="underconst">!UNDER CONSTRUCTION!</h1>
<div id="copyright">
<p id="copyright-text">&copy; 2019-2021 Spencer Leagra</p>
</div>
</body>
</html>

Answer 1

您的 #topbar 风格缺失 box-sizing: border-box;。目前元素的宽度设置为 100% 但默认情况下 (content-box) 它不会考虑填充，因此通过添加填充它会将元素拉伸到 100% 之外。

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

作为一些 UI 框架的示例，例如 Bootstrap 它将使用以下 class 来确保所有元素都使用 border-box:

*, ::after, ::before {
    box-sizing: border-box;
}

Answer 2

你说的是最左边的按钮吗？如果是，

尝试将此添加到 .topb.lt class： padding-left: 5px;

如何修复 HTML 站点页面右侧奇怪的偏移？

How to fix weird offset on right of page for HTML site?

html

css

offset