Html 导航栏切换图标在激活时翻转到左侧。覆盖向左对齐的徽标

我在Bootstrap4中使用了一个可折叠的导航条。我有一个左对齐的标志右对齐的菜单项。当屏幕尺寸减小且导航栏切换器处于活动状态时，菜单项将隐藏（在右侧），但切换器图标将显示在左侧。它与徽标重叠。我要扳机保持在右边

我尝试过给它绝对位置，使用导航栏向右切换，等等。我还尝试过将按钮放在div中，并在div之间使用justify content

这里有一个链接，指向一个带有我所写代码的代码笔

这些图像都是本地托管的，因为这只是一个练习项目，所以它们不会出现在Codepen预览中。我希望它仍然很容易告诉什么发生了与标志

谢谢

HTML:

---

我将HTML替换为导航按钮和周围的徽标图像，并注释掉以下CSS

.navbar-toggler {
    width: 1em;
    float: right;
    border: none;
}

.navbar-toggler-icon {
    position: fixed;
}

正文{
背景图片：url（“concrete texture.png”）；
}
.网格容器{
显示：网格；
字体系列：“Raleway”，无衬线；
网格模板列：10em自动；
网格模板行：1fr 5.5fr 1fr；
网格间距：1px；
填充：1px；
网格模板区域：
“标题”
“主菜单”
“页脚页脚”；
}
/*.表格项目{
边框：1px纯黑；
} */
#标题{
网格区域：标题；
}
/*导航栏*/
.导航链路{
显示：内联块；
字号：1em；
字母间距：1px；
文字装饰：无；
}
/*.导航杆切换器{
宽度：1米；
浮动：对；
边界：无；
}
.navbar切换图标{
位置：固定；
}*/
.酷链接{
显示：内联块；
颜色：#000；
文字装饰：无；
}
.酷链接：：之后{
内容：“；
显示：块；
宽度：0；
高度：2倍；
背景：黑色；
过渡段：宽度0.4s；
}
.cool链接：hover:：after{
宽度：95%；
}
@介质（最大宽度：600px）{
}
#菜单{
网格区域：菜单；
}
#主要{
网格区域：主；
显示：网格；
网格模板列：自动；
网格间距：5px；
}
img{
最大宽度：100%；
}
.盒子{
背景颜色：白肋木；
填充：10px；
}
a{
颜色：#292929；
文字装饰：无；
}
#页脚{
网格区域：页脚；
背景色：#达达达；
边界：无；
填充：20px；
}
#页脚ul{
显示器：flex；
证明内容：柔性端；
}
#页脚李{
填充：0 10px；
列表样式：无；
}
#页脚a：悬停{
文字装饰：无；
}
#页脚跨距{
显示器：flex；
证明内容：柔性端；
字号：0.9em；
}

现代书法










菜单






版权所有2018，现代书法公司。

我将HTML替换为导航按钮和周围的徽标图像，并注释掉以下CSS

.navbar-toggler {
    width: 1em;
    float: right;
    border: none;
}

.navbar-toggler-icon {
    position: fixed;
}

正文{
背景图片：url（“concrete texture.png”）；
}
.网格容器{
显示：网格；
字体系列：“Raleway”，无衬线；
网格模板列：10em自动；
网格模板行：1fr 5.5fr 1fr；
网格间距：1px；
填充：1px；
网格模板区域：
“标题”
“主菜单”
“页脚页脚”；
}
/*.表格项目{
边框：1px纯黑；
} */
#标题{
网格区域：标题；
}
/*导航栏*/
.导航链路{
显示：内联块；
字号：1em；
字母间距：1px；
文字装饰：无；
}
/*.导航杆切换器{
宽度：1米；
浮动：对；
边界：无；
}
.navbar切换图标{
位置：固定；
}*/
.酷链接{
显示：内联块；
颜色：#000；
文字装饰：无；
}
.酷链接：：之后{
内容：“；
显示：块；
宽度：0；
高度：2倍；
背景：黑色；
过渡段：宽度0.4s；
}
.cool链接：hover:：after{
宽度：95%；
}
@介质（最大宽度：600px）{
}
#菜单{
网格区域：菜单；
}
#主要{
网格区域：主；
显示：网格；
网格模板列：自动；
网格间距：5px；
}
img{
最大宽度：100%；
}
.盒子{
背景颜色：白肋木；
填充：10px；
}
a{
颜色：#292929；
文字装饰：无；
}
#页脚{
网格区域：页脚；
背景色：#达达达；
边界：无；
填充：20px；
}
#页脚ul{
显示器：flex；
证明内容：柔性端；
}
#页脚李{
填充：0 10px；
列表样式：无；
}
#页脚a：悬停{
文字装饰：无；
}
#页脚跨距{
显示器：flex；
证明内容：柔性端；
字号：0.9em；
}

现代书法










菜单


.navbar-toggler {
    width: 1em;
    float: right;
    border: none;
}

.navbar-toggler-icon {
    position: fixed;
}

<!-- Navbar -->
        <nav class="navbar bg-transparent navbar-expand-sm">

          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon mr-auto"><i class="fas fa-bars"></i></span>
          </button>

          <img src="logo5.png" alt="Logo" class="navbar-brand mr-auto" />

<!-- Navbar -->
        <nav class="navbar bg-transparent navbar-expand-sm">

          <img src="logo5.png" alt="Logo" class="navbar-brand mr-auto" />

          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon mr-auto"><i class="fas fa-bars"></i></span>
          </button>