HTML: how to remove the space inside the <hr> element

Is there a way to remove the space inside <hr> element? It seems a really simple and dumb problem, but I can’t find the answer anywhere.

hr.separator {
  border: 2px solid red;
  margin-left: 20px;
  margin-right: 20px;
}

<hr class="separator"/>

That one there:

>Solution :

You’ll probably find that the ‘gap’ comes and goes if you zoom in gradually.

The system sometimes has a problem deciding exactly how to map CSS pixels to screen pixels (several screen pixels make up one CSS pixel on modern screens).

A quick fix is to set the background color also to red.

hr.separator {
  border: 2px solid red;
  margin-left: 20px;
  margin-right: 20px;
  background: red;
}

<hr class="separator"/>