How do I get rid of space between boxes?

June 27, 2022

I’m trying to learn HTML and CSS and trying to figure out how to line up boxes next to each other. I’ve managed to fit two boxes with "width: 50%;" next to each other but there is still a white space between them and I’m wondering what this white space is and how to get rid of it. Here is the link to the code at CodePen: Boxes

* {
  margin: 0;
  padding: 0;
}

.box {
  box-sizing: border-box;
  width: 50%;
  height: 200px;
  padding: 15px;
  background-color: #127202;
  display: inline-block;
  border: 5px solid;
  border-color: #000000;
}

section {
  white-space: nowrap;
}

<main>
  <section>
    <div class="box">
    </div>
    <div class="box">
    </div>
  </section>
</main>
<footer>
</footer>

>Solution :

So, whitespace in your actual HTML code is (by default) interpreted as text (although multiple white space in a row does get condensed into one singular space, as is happening here). You can tell that this is the case, because if you hover over the gap your cursor changes to the I-beam, and you can actually select the space.

One solution would just be to have no whitespace between your two div tags, e.g.