CSS - borders how to avoid collision

Question

I created a CSS external file and I'm running into a lot of issues with borders.

I want to create a border for each section, and I want these sections to be separated by a space, and not have their borders collide.

I am running this code: image with code

And nevertheless, the borders of both sections are colliding.

I'm a noobie, started html + css yesterday.

Answer 1

This is example of it you can adjust how you want it to be.

.main {
  display: flex;
}

.square {
  width: 300px;
  height: 300px;
  border: 2px solid black;
  margin: 30px;
}

<section class="main">
  <div class="square"></div>
  <div class="square"></div>
</section>
<section class="main">
  <div class="square"></div>
  <div class="square"></div>
</section>
<section class="main">
  <div class="square"></div>
  <div class="square"></div>
</section>