After deploying in firebase, My react app goes slightly misaligned in margins,padding and opacity of icons go 1% sometimes. I'm new to React and deploying works. Also I could see the changes only after some hours after the firebase deploy.

my JSX

            <Col lg={5}>
              <div style={{color: screen === 'Kitchen' ? '#42D7C2' : '#000', borderLeft : 
screen === 'Kitchen' ? '4px solid #42D7C2' : 'none'}} name='kitchenDefault' onClick={() => setScreen('Kitchen')} id='kitchenDefault' tabIndex='-1' className="selectionUserMg">Kitchen</div>
                  <div onClick={() => setScreen('Menu')} tabIndex='-1' className="selectionUserMg">Menu</div>
                  <div onClick={() => setScreen('Chef')} tabIndex='-1' className="selectionUserMg">Chefs</div>
                  <div onClick={() => setScreen('Reviews')} tabIndex='-1' className="selectionUserMg">Reviews</div>
                </Col>

my CSS

 .selectionUserMg{

  padding: 8%;
  background-color: rgba(0, 0, 0, 0.055);
  border-bottom: 1px solid rgba(0, 0, 0, 0.075);
  color : #000;
  font-size: 20px;
  font-weight: 400;
  cursor: pointer;
  padding-left: -20px;
}