Can't get rid of margin, already set the margin to 0

Question

There is a margin on the div elements id="textbox" and id="visualizer". I have already set the margin to 0 in the CSS, but it wouldn't go away. You can still see the margin in the inspect window. I have experimented with changing the display types in the container div, etc but the problem still persist. You can find the code attached in the link below:

https://jsfiddle.net/kshatriiya/fhbqqmxc/1/

<div id="play-area">
    <div id="play-area-overlay">
        <div id="textbox">
            <h2>
                Welcolme. 

            </h2>
        </div>
        <div id="visualizer">   

        </div>
    </div>
    </div>
</div>

css:

#play-area {

position: relative;
width: 100vw;
height: 400px;
margin: 0 auto;


}

#play-area-overlay {

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
margin: 0px;
width: 100%;

}

#textbox {

height: 100%;
width: 400px;
margin: 0px;

}

#visualizer {

height: 100%;
width: 50%;
margin: 0px;
}

Answer 1

It's not margin you're seeing in the inspector, but negative space because your elements are set to use width: 50%;. By default, div elements are block-level, which means they will start on new lines. Floating will change this behavior.

Add float: left to your CSS (and you can consolidate the elements like such), and they'll fit together side-by-side to form 100% width.

#textbox,
#visualizer {
  height: 100%;
  width: 50%;
  margin: 0px;
  float: left;
}

Here's a full example with the elements colored so you can see them next to each other:

window.onscroll = function() {
  var navbar = document.querySelector("#navbar");
  var Yoffset = this.pageYOffset;

  if (Yoffset > 0) {
    navbar.style.borderBottom = "1px solid rgba(0, 0, 0, 0.2)";
  } else {
    navbar.style.borderBottom = "";
  }
}

body,
html {
  margin: 0;
  padding: 0;
  background: #FFFFFF;
}
#main-container {
  width: 100%;
  min-width: 100vw;
  height: 100%;
}
#mainscreen {
  width: 100vw;
  height: 100vh;
  margin: 0px auto;
}
#navbar-container {
  position: relative;
  width: 100vw;
  height: 68.53px;
}
#navbar {
  width: 100vw;
  position: fixed;
  display: flex;
  flex-direction: row;
  text-align: center;
  align-content: center;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 0.6);
  color: #112D34;
  opacity: 0.8;
  z-index: 1;
}
#navbar #logo {
  padding: 0px 20px 0px 20px;
}
#navlinks ul {
  display: flex;
  flex-direction: row;
  text-align: center;
  align-items: center;
  align-content: center;
  margin: 0px auto;
  padding: 0px;
  margin-right: 30px;
}
#navlinks ul li {
  list-style: none;
  margin: 10px 20px 10px 20px;
}
#play-area {
  position: relative;
  width: 100vw;
  height: 400px;
  margin: 0 auto;
}
#play-area-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  margin: 0px;
}
#textbox,
#visualizer {
  height: 100%;
  width: 50%;
  margin: 0px;
  float: left;
}
#textbox {
  background: lightblue;
}
#visualizer {
  background: lightgreen;
}
#playlist-container {
  width: 100vw;
  height: 600px;
}

<section id="main-container">
  <div id="navbar-container">
    <div id="navbar">
      <div id="logo">
        <h4><SPAN>V</SPAN>ibe<span>C</span>iti</h4>
      </div>
      <div id="navlinks">
        <ul>
          <li>About</li>
          <li>Playlist</li>
          <li>Gallery</li>
          <li>Portfolio</li>
          <li>
            <button>Contact</button>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div id="mainscreen">
    <div id="play-area">
      <div id="play-area-overlay">
        <div id="textbox">
          <h2>Welcolme.</h2>
        </div>
        <div id="visualizer">
        </div>
      </div>
    </div>
  </div>
  <div id="playlist-container">
  </div>
</section>