CSS icon glitch?

Question

I'm currently trying to code a speaker icon and I nearly finished but then the inner circle of the speaker glitched but it worked at CSSBattle Website and I can't fix it now.Every circle is working fine but only the first one is stuck in some way.. I'd really appreciate some help. I can't solve it so... Here's the code:

 body {
            background-color: #191919;
            width: 400px;
            height: 300px;
        }
        
        .speaker-triangle {
          margin-top: 13%;
          margin-left: 2%;
          height: 0px;
          width: 0px;
          border-top: 100px solid #191919;
          border-bottom: 100px solid #191919;
          border-left: 90px solid #191919;
          border-right: 90px solid #5DBCF9;
      }
          
        .speaker-holder {
          background-color: #5DBCF9;
          width: 60px;
          height: 50px;
          margin-top: -126px;
          margin-left: 68px;
          border-top-left-radius: 9px;
          border-bottom-left-radius: 9px;
        }
       
        .inner-circle {
          position: absolute;
          background-color: #191919;
          height: 80;
          width: 40;
          border-top-right-radius: 110px;
          border-bottom-right-radius: 110px;
          margin-top: -80px;
          margin-left: 215px;
          border: 10px solid #5DBCF9;
          border-left: #191919;
        }
        
         .middle-circle {
          position: absolute;
          background-color: #19191;
          height: 130px;
          width: 65px;
          border-top-right-radius: 110px;
          border-bottom-right-radius: 110px;
          margin-top: -104px;
          margin-left: 215px;
          border: 10px solid #5DBCF9;
          border-left: #191919;
        }
        
         .outer-circle {
          position: absolute;
          background-color: #19191;
          height: 180px;
          width: 90px;
          border-top-right-radius: 110px;
          border-bottom-right-radius: 110px;
          margin-top: -128px;
          margin-left: 215px;
          border: 10px solid #5DBCF9;
          border-left: #191919;
        }

  <div class="speaker-triangle"></div>
    <div class="speaker-holder"></div>
    <div class="inner-circle"></div>
    <div class="middle-circle"></div>
    <div class="outer-circle"></div>

Answer 1

You have not set the length unit after the height and width of the .inner-circle You have:

height: 80;
width: 40;

The correct is:

height: 80px;
width: 40px;

You can identify such bugs using the inspect element function that all browsers have. The correct full example is:

body {
  background-color: #191919;
  width: 400px;
  height: 300px;
}

.speaker-triangle {
  margin-top: 13%;
  margin-left: 2%;
  height: 0px;
  width: 0px;
  border-top: 100px solid #191919;
  border-bottom: 100px solid #191919;
  border-left: 90px solid #191919;
  border-right: 90px solid #5dbcf9;
}

.speaker-holder {
  background-color: #5dbcf9;
  width: 60px;
  height: 50px;
  margin-top: -126px;
  margin-left: 68px;
  border-top-left-radius: 9px;
  border-bottom-left-radius: 9px;
}

.inner-circle {
  position: absolute;
  background-color: #191919;
  height: 80px;
  width: 40px;
  border-top-right-radius: 110px;
  border-bottom-right-radius: 110px;
  margin-top: -80px;
  margin-left: 215px;
  border: 10px solid #5dbcf9;
  border-left: #191919;
}

.middle-circle {
  position: absolute;
  background-color: #19191;
  height: 130px;
  width: 65px;
  border-top-right-radius: 110px;
  border-bottom-right-radius: 110px;
  margin-top: -104px;
  margin-left: 215px;
  border: 10px solid #5dbcf9;
  border-left: #191919;
}

.outer-circle {
  position: absolute;
  background-color: #19191;
  height: 180px;
  width: 90px;
  border-top-right-radius: 110px;
  border-bottom-right-radius: 110px;
  margin-top: -128px;
  margin-left: 215px;
  border: 10px solid #5dbcf9;
  border-left: #191919;
}

  <div class="speaker-triangle"></div>
  <div class="speaker-holder"></div>
  <div class="inner-circle"></div>
  <div class="middle-circle"></div>
  <div class="outer-circle"></div>