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

Question

I'm working on a website, using Repl.it. Unfortunately, I've run into an issue I haven't seen before and can't seem to fix. In the example, as you can see, there is a navigation bar with 3 buttons. However, you cannot see the right edge of the rightmost button. Is there a way I can fix this? What is causing this? Thanks.

The Website: The Site.

The Code:

@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>

No, the buttons on the top. Even if you go into fullscreen, you can't see the right edge of the button all the way on the right. — Fox GAMING_NTF, Mar 02 '21 at 14:43

score 2 · Accepted Answer · answered Mar 02 '21 at 14:43

Your #topbar style is missing box-sizing: border-box;. At the moment the width of the element is set to 100% but by default (content-box) it will not take padding into consideration, hence by adding padding it stretches the element beyond 100%.

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

As an example in some UI frameworks such as Bootstrap it'll use the following class to make sure all elements are using border-box:

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

Thanks, this is it. For some odd reason I can't accept this as an answer until 10 minutes later. — Fox GAMING_NTF, Mar 02 '21 at 14:45

score 0 · Answer 2 · answered Mar 02 '21 at 14:44

0

Are you talking about the leftmost button? If so,

Try to add this to the .topb.lt class: padding-left: 5px;

answered Mar 02 '21 at 14:44

robloxGamer3029

55
1
6

No, the rightmost button isn't entirely visible. The answer above answered my question. – Fox GAMING_NTF Mar 02 '21 at 14:46

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

2 Answers2