Why is my <Div> disappearing when I add Class to my <span> within it?

I'm trying to take a variable and display it on my html page via CSS for a Graphical display in OBS streaming software.
Every time I add the class .wrappers to the span id p1Name (as well as p2Name) the text disappears from the html output in OBS.
What is causing the text to disappear? As otherwise it perfectly is displayed when I don't include the class .wrappers

I've tried modifying overall page settings, the class specifications and moving the object itself but the text just seems to have disappeared.

Edit Changing the opacity within wrappers does not affect the visibility of the object

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

//Time stuff
let time = document.getElementById("current-time");

setInterval(() => {
  let d = new Date();
  time.innerHTML = d.toLocaleTimeString(navigator.language, {
    hourCycle: 'h23',
    hour: '2-digit',
    minute: '2-digit'
  });
}, 1000);

<!-- language: lang-css -->

@font-face {
  font-family: "Futura";
  src: url('Resources/Fonts/Brandon_bld.otf');
}

* {
  margin: 0;
  padding: 0;
  font-family: "Futura";
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
}

.graphicBox {
  position: absolute;
  width: 1800px;
  height: 105px;
  background: rgb(51, 116, 182);
  background: linear-gradient(90deg, rgba(51, 116, 182, 0.75) 0%, rgba(110, 83, 180, 0.75) 70%);
  border-radius: 15px;
  bottom: 40px;
  left: 50px;
  filter: drop-shadow(-2px 2px 4px black);
}

.statusBox {
  position: absolute;
  font-family: "Futura";
  font-weight: bold;
  padding-top: 8px;
  font-size: 40px;
  width: 130px;
  height: 70px;
  background: rgb(231, 231, 231);
  border-radius: 15px;
  text-align: center;
  bottom: 125px;
  left: 100px;
  filter: drop-shadow(-2px 2px 4px black);
}

.timeDisplay {
  width: 140px;
  height: 30px;
  display: flex;
  align-items: left;
  justify-content: center;
  position: absolute;
  font-size: 14px;
  color: white;
  bottom: 58px;
  left: 771px;
}

.timeZone {
  width: 60px;
  height: 20px;
  display: flex;
  align-items: left;
  justify-content: space-between;
  position: absolute;
  font-size: 15px;
  color: white;
  bottom: 40px;
  left: 812px;
}

.scoreboardP1 {
  position: absolute;
  left: 150px;
  bottom: 60px;
  width: 300px;
}

.scoreboardP2 {
  position: absolute;
  left: 450px;
  bottom: 60px;
  width: 300px;
}

.wrappers {
  position: absolute;
  width: 340px;
  height: 100px;
  line-height: 54px;
  top: 356px;
  opacity: 0;
  color: black;
}

#p1Wrapper {
  bottom: 540x;
  left: 300px;
  color: white;
}

#p2Wrapper {
  width: 300px;
  bottom: 20px;
  left: 100px;
  color: white;
}

.scoreDisplay {
  position: absolute;
  color: white;
  width: 60px;
  height: 60px;
  align: center;
  font-family: "Avant";
}

#p1Format {
  top: 30px;
  left: 1160px;
}

#p2Format {
  top: 30px;
  left: 1450px;
}

.scoreBox {
  position: absolute;
  width: 45px;
  height: 45px;
  background: white;
  border-radius: 10px;
  align: center;
}

#p1Box {
  top: 28px;
  left: 1150px;
}

#p2Box {
  top: 28px;
  left: 1440px;
}

<!-- language: lang-html -->

<div class="graphicBox">
</div>

<div class="statusBox">
  <p>NEXT</p>
</div>


<div class="timeDisplay">
  <h1 id="current-time"></h1>
</div>



<div class="timeZone">
  <p>EST</p>
</div>


<div id="overlayP1" class="scoreboardP1">
  <span id="p1Wrapper" class="wrappers">
            <span id="p1Name" class="names"></span>
  </span>
</div>

<div class="scoreboardP2">
  <span id="p2Wrapper">
            <span id="p2Name" class="names"></span>
  </span>
</div>

<!-- end snippet -->

The problem seem to be two things in the CSS class .wrappers.

Because .wrappers has the property position: absolute, the element was disappearing out of the screen.
Also, with the propriety opacity: 0 the item is invisible.

So, by commenting out these elements in the CSS:

  .wrappers {
    /* position: absolute; */
    width: 340px;
    height: 100px;
    line-height: 54px;
    top: 356px;
    /* opacity: 0; */
    color: black;
  }

I can now see both p1Name and p2Name when the parent span p1Wrapper and p2Wrapper have the wrappers class added to them, like this:

<span id="p1Wrapper" class="wrappers">

Also, just some quick notes:

• align: center is not a valid CSS property.
• While testing I added inside the p1Name span some words "testp2" so I could see the changes after formatting: <span id="p2Name" class="names">testp2</span>