HTML width at 100% overflowing

I am trying to set the width of a container to 100% of the page. By itself it seems to be fine, but once I add another <div> element in the container, it overflows and the page becomes scrollable. I don't know what's wrong, because I haven't changed the padding and margin settings.

EDIT: the issue only seems to happen on chrome.

EDIT #2: Some people told me that they were not experiencing the same issue on their end, so I uploaded the project files and a screenshot of what I see on my google drive:

Project files

/* this is my css: */

body {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  background-color: steelblue;
}

#mainContainer {
  width: 100%;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.genContainer {
  width: 50%;
  display: flex;
  justify-content: center;
}

.square {
  width: 5%;
  border: 1px solid black;
}

.circle {
  width: 5%;
  border: 1px solid black;
  border-radius: 50%;
}

<body>
  <div id="mainContainer">

    <div class="genContainer">

      <div class="person square"></div>

    </div>

  </div>
</body>

Thank you!

Solution

Unset the padding or margin added by the browser. Some browsers add css by default to your HTML page. Write this as the first style rule:

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

This will reset the margin and padding of all elements to 0 and so later in css you can override it.