[SOLVED] How do I bypass the default padding in Electron?

How do I bypass the default padding in Electron?

In electron, I have noticed that by default, there is padding which pushes in all of the contents of my GUI closer in from all sides.

In the image referenced below, the background is colored light grey, with the other elements in different colours.

https://i.sstatic.net/1XqyH.png

It is evident that there is a border around the whole GUI, but I have no place in my code that has this additional padding or margin specified.

How do I go about removing this border?

Here is my code ~

Index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="theme.css">
    <script src="https://kit.fontawesome.com/46eafe3431.js" crossorigin="anonymous"></script>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://kit.fontawesome.com/46eafe3431.js">
    
  </head>
  <body id=background-test-color>
    <div id=header> 
      <button id='minimize-btn'><i class="far fa-window-minimize"></i></button>
      <button id='max-unmax-btn'><i class="far fa-square"></i></button>
      <button id='close-btn'><i class="fas fa-times"></i></button>
    </div>
    <div class='highlight'>
      <!-- menu bar -->

      <pre>
        <h1>💖 Hello World!</h1>
        <p>Welcome to your Electron application.</p>
      </pre>
    </div>
  </body>
</html>

index.css

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#header {
  /* width: 100%; */
  height: auto;
  background-color: bisque;
  margin-top: auto;
  margin-bottom: auto;
  text-align: right;
  
}

#background-test-color {
  background-color: darkgray;
}

theme.css

.highlight pre, pre, .highlight .hll, body {
    background-color: #33322c;
    border: 1px solid #ccc;
    /* padding: 6px 10px; */
    /* border-radius: 3px; */
    color: #FFFFFF;
  }

Solution

Try this

body {
    margin: 0;
    text-align: center;
}

You can then remove the negative margins from #header.