CSS not reading correctly in Chrome - need webkit for width/color?

Question

I have a web page where I am creating a legend for a map. It renders perfect in Edge, but only renders two of the items correctly in Chrome for whatever reason.

Basically, I have expanded the width property of the legend so the entire legend item name can be seen clearly and I have added a new legend item to describe the color orange.

I have attached the correct looking legend (rendered in edge) and the problem legend (rendered in Chrome). Chrome should be able to read width and background-color without using webkit as far as I know, so I'm not sure what the problem is.

Good legend

Bad legend

Please note - it renders the green and gray legend items correctly, but won't render orange for whatever reason. The class "legend-color" has to be initialized with something so black is used before being overwritten with the appropriate color.

The classes in question (mainly ".legend-color orange" and "legend-item") in CSS:

.legend-color {
  width: 30px;
  height: 20px;
  background-color: black;
  float: left;
  margin-right: 5px;
}

.legend-color.green {
  background-color: rgba(8, 107, 27, 0.70);
}

.legend-color.grey {
  background-color: rgba(105, 105, 105, 0.70);
}

.legend-color.orange {
  background-color: rgba(252, 140, 12, 0.70);
}

.legend-text {
  margin: 0;
  padding: 0;
  height: 20px;
  font-size: 16px;
  padding-top: 2px;
}

.legend-item {
  display: block;
  position: relative;
  width: 170px;
  margin: 5px;

The HTML that references above classes:

 <div id="cip-states-map">
  <div id="cip-states-legend">
        <h1>Legend</h1>
        <div class="legend-item">
          <div class="legend-color green"></div>
          <p class="legend-text">Enrolled</p>
        </div>
        <div class="legend-item">
          <div class="legend-color grey"></div>
          <p class="legend-text">In Development</p>
        </div>
        <div class="legend-item">
          <div class="legend-color orange"></div>
          <p class="legend-text">Has &gt;1 Focal Area</p>
        </div>
  </div>
  </div>

Answer 1

Upon running the code provided inside stackoverflow, Chrome is rendering as it should be. There might be a caching issue for you which can be resolved with a hard refresh (Shift+F5) or by opening the Inspector in Chrome and disabling the cache under the network tab.

You probably don't need to specify the black background colour in the .legend-color class either if it isn't being used.