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;
}