Having trouble positioning CSS circles

1

My pen: https://codepen.io/bakecaker/pen/jazdKd

I’m trying to get the circles to take up half of the container each, but they’re slightly to the right and when you make the page bigger they hang to the left. Any suggestions? Been trying to get this to work for a couple hours. I’ve tried drawing the borders out to see how the elements are interacting. I’m stumped.

2

Might try adding a padding of 0 5px to .statusLights.col-sm-6 class, it currently has 15 px of padding on the left and right, this is making the content in the box larger than its parent container