Horizontal Line color styling changed in bootstrap

HTML-CSS
1

Hello,

I am trying to style the color of my horizontal line. The issue is that ever sine I added bootstrap to my document, I can’t get the colors to come out correctly.

Pen: https://codepen.io/michaelnicol/pen/eYWGwBW

Below every h2 at the start of every section I have a <hr class="section-title-hr"> (html 27)

Some of the hr's in the black sections have another class called white-hr. (html 57)

The CSS code is found on lines 118 and 127:

.section-title-hr {
  width: 175px;
  height: 1px;
  border: 1px solid rgb(255, 111, 0);
  background-color: rgb(255, 111, 0);
  display: block;
}
.white-hr {
  border: 1px solid rgb(255, 255, 255);
  background-color: rgb(255, 255, 255);
  display: block;
}

The issue is that the colors don’t come out correctly.

No bootstrap:

image
image926×436 58.1 KB

image
image1153×648 65.5 KB

Bootstrap:

image
image891×404 40.7 KB

image
image1253×808 72.6 KB

Is there anyway I can get around these color changes while still keeping bootstrap? Or will I need to remove bootstrap 5 for the non-bootstrap styling?

I tried using straight RGB values to make sure the default values of white and/or orange were not changed, but I got the same colors.

2

Bootstrap is setting an opacity on the hr element. You can just overwrite it in the selectors (opacity: 1).