Html 如何正确对齐导航栏中的元素（文本和图像）？

希望你们都好。我现在要做的是将小图标与文本对齐，我在

a

类中尝试了

d-inline

。仍然不起作用。 另一个问题是背景色。背景色就在

ul

标签后面，我不知道为什么。我在

nav

标记中放置了一个

navbar自定义

类，但它不起作用

这是我的密码：

.navbar自定义{
背景色：#FAFC；
}
/*更改品牌和文字颜色*/
.navbar定制。navbar品牌，
.navbar自定义.navbar文本{
颜色：#369d4a！重要；
}
/*更改链接颜色*/
.navbar自定义.nav-item.active.nav链接，
.导航栏自定义.导航项.导航链接{
颜色：#369d4a！重要；
}
/*更改活动链接或悬停链接的颜色*/
.navbar自定义.nav-item.active.nav链接，
.navbar自定义.nav项：悬停.nav链接{
颜色：#2b5c35！重要；
}
.导航栏定制.导航栏品牌{
颜色：#369d4a；
}
.navbar自定义.navbar切换{
背景色：#369d4a；
}
.导航栏自定义.图标栏{
背景色：#369d4a；
}

feather.replace（）

要对齐导航栏中的元素，可以使用flexbox

.element-class {
    display: flex;
    align-items: center;
    justify: space-between; /* or center anyone that fits your design*/
   padding: 1rem;
}