How do it make SideNav consistent on all browsers?

Question

I tried to position the SideNav to the right side of the browser with css changes and it works locally on Chrome and FireFox. However, when I host it the SideNav doesn't position to the right and instead slips to the bottom or disappears. This happens on Mac (Safari, Chrome an FireFox) and other windows machines as well.

What am I missing here?

My CSS to set it to the right:

.sidenav_Right {
  position: fixed;
  top: 0;
  bottom: 0;   
  left: 1302px;  
  z-index: 1006;
  float: right;
  min-width: 64px;
  background: #4a4a4a;
  -webkit-transition: min-width 0.2s;
  -moz-transition: min-width 0.2s;
  -o-transition: min-width 0.2s;
  -ms-transition: min-width 0.2s;
  transition: min-width 0.2s;
}

This is the reactJS set up

import SideNav, { NavItem, NavIcon, NavText } from '@trendmicro/react-sidenav';   import '@trendmicro/react-sidenav/dist/react-sidenav.css';  

<SideNav className="sidenav_Right fw-shadow bg-white py-0"> 
 <SideNav.Nav> 
  <NavItem eventKey="key1"> 
   <NavIcon> 
    <i className="fa fa-dot-circle-o"/>
   </NavIcon>
   <NavText>Key 1</NavText> 
  </NavItem> 
 </SideNav.Nav> 
</SideNav>