White space between body and div - Html

Bobjoerules
February 17, 2023
215 views
0 votes
2 Answers

I have been looking everywhere for a solution to my problem, but nothing seems to work. It always bugged me that the top of my website always had a gap on the top and all the answers to the problem did nothing. I inspected the website in firefox and found that there was a whitespace between the body and first div (I tried putting the code on the same row but that did nothing). Any Idea on how to remove the whitespace? (I can remove it in inspect on firefox and it goes away there)

Here is the HTML and CSS:

/* CSS Document */

html,
body {
  height: 100%;
}

* {
  overflow: auto;
  margin: 0;
}

body {
  margin: 0;
  background-color: #111111;
  padding: 0;
  font-family: verdana;
  box-sizing: border-box;
  font-size: 1rem;
  font-weight: 400;
  color: white;
  text-align: left;
}

video {
  width: 100%;
  z-index: 0;
}

.menubar {
  left: 100;
}

.ulmenubar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

.ulmenubar a {
  float: left;
}

.space {
  margin: 0;
  padding: 0;
}

.rightside {
  float: right;
}

.ulmenubar a {
  display: block;
  color: whitesmoke;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.ulmenubar a:hover {
  color: grey;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #181818;
}

::-webkit-scrollbar-thumb {
  background: white;
  border-radius: 10px;
}

.row {
  display: flex;
}

.column {
  flex: 33.33%;
  padding: 5px;
}

#contact {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}

#cover {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 5;
  width: 100%;
  height: 100%;
  display: none;
}

<div class="menubar">
  <ul class="ulmenubar">
    <div class="rightside">
      <a href="#home" class="active">Home</a>
      <a href="#vids">Portfolio</a>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
    </div>
  </ul>
</div>
<div class="space"><video id="background-video" autoplay="" loop="" muted=""><source src="vid.mp4" type="video/mp4"></video></div>
<div id="vids"></div>
<div class="row">
  <div class="column">
    <img src="https://media0.giphy.com/media/xT8qBoDhee6aWOhLqw/giphy.gif?cid=790b7611a86749120009311d9c18651c96962c8e7e27def2&amp;rid=giphy.gif&amp;ct=g" alt="Sea" style="width:100%">
  </div>
  <div class="column">
    <a onclick="openWin()"><img src="https://media4.giphy.com/media/UxTZDNv0Zej4s/giphy.gif?cid=790b76118b066a194adc23988667623a5aea3c7b55f3c44b&amp;rid=giphy.gif&amp;ct=g" alt="Forest" style="width:100%"></a>
  </div>
  <div class="column">
    <img src="https://media4.giphy.com/media/l41lQIclE3lItAlfq/giphy.gif?cid=ecf05e47mgmmt0kas0kp9zc0435gcanw878chwmk129z9uhf&amp;rid=giphy.gif&amp;ct=g" alt="Sky" style="width:100%">
  </div>
</div>

Tags: css html

Answers

Chosen as BEST ANSWER
- Bobjoerules
- February 18, 2023 at 2:27 am
- 0 votes
0
After many hours of trying, I figured out what the problem was. This may not be the case but when I went into the HTML file on text edit, I saw two <body> on the top, I deleted one and also deleted the space between <head> and <body>. It worked.