Javascript 将汉堡菜单移到汉堡菜单右侧

我有一个汉堡包菜单组件使用反应汉堡包菜单组件，它工作正常，但我希望它移动到页面的右侧，并从右侧打开它。我在CSS中尝试了right:0和float:right，并尝试更改位置系统，但要么它不移动，要么样式被破坏。如何将完全相同的菜单移到右侧

export default props => {
  return (
  // Pass on our props
    <Menu {...props}>
      <a className='menu-item' href='/'>
          Home
      </a>

      <a className='menu-item' href='/burgers'>
          Burgers
      </a>

      <a className='menu-item' href='/pizzas'>
          Pizzas
      </a>

      <a className='menu-item' href='/desserts'>
          Desserts
      </a>
    </Menu>
  )
}

html,
body {
  margin: 0;
}

#App {
  font-family: sans-serif;
  height: 100vh;
}

#page-wrap {
  text-align: center;
  overflow: auto;
}

.bm-item {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 10px;
  color: #d1d1d1;
  transition: color 0.2s;
}


.bm-item:hover {
  color: white;
}


.bm-burger-button {
  position: fixed;
  width: 36px;
  height: 30px;
  left: 36px;
  top: 36px;
  /* right: 0; */
  /* float: right; */
}


.bm-burger-bars {
  background: #373a47;
}


.bm-cross-button {
  height: 24px;
  width: 24px;
}


.bm-cross {
  background: #bdc3c7;
}


.bm-menu {
  background: #373a47;
  padding: 2.5em 1.5em 0;
  font-size: 1.15em;
}

.bm-morph-shape {
  fill: #373a47;
}


.bm-item-list {
  color: #b8b7ad;
}


.bm-overlay {
  background: rgba(0, 0, 0, 0.3);
}

and:

class HRPanel extends Component {
  render () {
    return (
      <div id='App'>
        <SideBar pageWrapId='page-wrap' outerContainerId='App' />
        <div id='page-wrap'>

        </div>
      </div>
    )
  }
}

export default HRPanel

导出默认道具=>{
返回(
//传递我们的道具
)
}
html，
身体{
保证金：0；
}
#应用程序{
字体系列：无衬线；
高度：100vh；
}
#换页{
文本对齐：居中；
溢出：自动；
}
.bm项目{
显示：内联块；
文字装饰：无；
边缘底部：10px；
颜色：#d1d1；
过渡：颜色0.2s；
}
.bm项目：悬停{
颜色：白色；
}
.bm汉堡按钮{
位置：固定；
宽度：36px；
高度：30px；
左：36px；
顶部：36px；
/*右：0*/
/*浮动：对*/
}
.bm汉堡吧{
背景：#373a47；
}
.bm交叉按钮{
高度：24px；
宽度：24px；
}
.bm十字架{
背景：#bdc3c7；
}
.bm菜单{
背景：#373a47；
填充：2.5em1.5em0；
字号：1.15em；
}
.bm变形形状{
填充：#373a47；
}
.bm项目列表{
颜色：#b8b7ad；
}
.bm覆盖层{
背景：rgba（0,0,0,0.3）；
}
以及：
类HRPanel扩展组件{
渲染（）{
返回(
)
}
}
导出默认HRP面板

有没有办法解决这个问题？

解决方式如下：

.bm-burger-button {
  position: relative;
  width: 36px;
  height: 30px;
  right: 36px;
  top: 36px;
  /* right: 0; */
  float: right;
}