line break not rendering as expected

Question

Any idea why there\'s a thin grey line above my green

---

and how to get rid of it?

Thanks

https://jsfiddle.net/Lc7gym88/

hr {
  border         


        

Answer 1

It's because

---

has border (at least in FireFox since

---

has browser dependent style).

Remove border first.

hr {
  border: none;
  border-bottom: 4px solid #469551;
  width: 30%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px !important;
  height: 0;
}
body {
  background-color: black;
}