How to get rid of the white space

Question

I'm currently making a test site, but constantly keep getting a white border on the top and right of the screen: Example. I've tried to use: position: fixed but that didn't work. Here is my code:

.Main-Header {
  font-size: 60px;
  font-family: Garamond, Serif;
  color: #818181;
  background-color: #111;
  margin: 0px 0px 0px 120px;
  padding-left: 20px;
  padding-top: 0px;
  border-top: 0px;
}

.sidenav {
  height: 100%;
  width: 130px;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: #111;
  padding-top: 25px;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 28px;
  color: #818181;
  display: block;
}

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

.main {
  margin-left: 130px;
  padding: 0px 10px;
}

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

.pic1 {
  padding-left: 30px;
  padding-bottom: 15px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test 1</title>
  <link rel="stylesheet" href="test.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <h1 class="Main-Header"><em>Test Site</em></h1>

  <div class="sidenav">
    <div class="pic1"><a class="active" href="test.html"><i class="fa fa-home"></i></a></div>
    <a href="index.html">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </div>

  <div class="main">
    <br>
    <p><a href="index.html">index</a></p>
  </div>


</body>

</html>

score 4 · Answer 1 · edited Jan 12 '22 at 16:11

4

Add the following CSS rule :

body {
  margin: 0;
}

See this answer for more details.

edited Jan 12 '22 at 16:11

Kameron

10,240
4
13
26

answered Jan 12 '22 at 16:07

Tom

4,972
3
10
28

Gahan Vig · Answer 2 · 2022-01-12T16:19:56.117

0

Add the basic CSS reset By adding -

* {
    margin: 0px;
    padding: 0px;
}

By default CSS adds a margin and padding of 16px by adding the above CSS it will remove the margins and paddings of 16px

edited Jan 12 '22 at 16:19

answered Jan 12 '22 at 16:10

Gahan Vig

196
2
13

How to get rid of the white space

2 Answers2