Remove whitespace in HTML

Question

I'm just writing an "exit" button for a game client I'm making in Electron, and after writing the code for the button, a giant white bar appears next to it. I'd also like to know how to use translateX(percentage) to move it up to the top middle of the page but can't figure it out. =

.ExitButton {
  color: red;
  font-size: 25px;
  max-width: 55px;
  length: 30px;
  border-color: black;
  transition-duration: 0.4s;
  cursor: pointer;
  text-align: center;
}

.ExitButton:hover {
  background-color: black;
}

.Exitbutton {
  background-color: transparent;
}

<webview src="https://bapbap.gg"></webview>

<button class="ExitButton" onclick="alert('Are you sure you want to exit BapClient?')">Exit</button>
</button>

Answer 1

I think this is happening because your body tag has a white background color, try changing it with the background color of the page or you can also do the following:

.ExitButton {
/* ... */
position: absolute;
/* make the button 0 pixels away from bottom of the page */
bottom:0;
/* you can use top, left or right just like this way 
to put the button on anywhere on the page you want */
}

This will essentially give your button an absolute position and enable you to place it wherever you want. If it overlaps some elements, use z-index.