Html 引导梯度背景未正确渲染

我的导航栏中有一个汉堡图标的背景渐变。 正如您在代码片段结果中看到的，它的左右两侧都有一些奇怪的“边框”

我怎样才能使这些边界消失

.btn主{
边框颜色：透明！重要；
背景色：透明！重要；
显示：内联块；
高度：40px；
背景#0080eb；
背景：线性梯度（90度，#0080eb 0，#00d3eb 100%）；
颜色：#fff；
字体大小：13px！重要；
字号：700；
边界半径：20px！重要；
填充：0 9px！重要；
线高：40px；
盒影：0 10px 13px-10px rgba（0128235.75）；
}
.bg-primary.container{
背景色：透明！重要；
}

这是
边框
问题，添加
边框：0！重要信息
如果它正常工作，请检查以下内容：-


.btn主{
边框颜色：透明！重要；
背景色：透明！重要；
显示：内联块；
宽度：40px；
高度：40px；
背景#0080eb；
背景：线性梯度（90度，#0080eb 0，#00d3eb 100%）；
颜色：#fff；
字体大小：13px！重要；
字号：700；
边界半径：20px！重要；
填充：0 9px！重要；
线高：40px；
盒影：0 10px 13px-10px rgba（0128235.75）；
边界：0！重要；
}
.bg-primary.container{
背景色：透明！重要；
}




这是
边框
问题，添加
边框：0！重要信息
如果它正常工作，请检查以下内容：-


.btn主{
边框颜色：透明！重要；
背景色：透明！重要；
显示：内联块；
宽度：40px；
高度：40px；
背景#0080eb；
背景：线性梯度（90度，#0080eb 0，#00d3eb 100%）；
颜色：#fff；
字体大小：13px！重要；
字号：700；
边界半径：20px！重要；
填充：0 9px！重要；
线高：40px；
盒影：0 10px 13px-10px rgba（0128235.75）；
边界：0！重要；
}
.bg-primary.container{
背景色：透明！重要；
}




这是
边框
问题，添加
边框：0！重要信息
，它可以正常工作是的！只是。。。我没有设置边界，所以我认为这是另外一回事。。。非常感谢。添加
背景剪辑：填充框它是
边框
问题，添加
边框：0！重要信息
，它可以正常工作是的！只是。。。我没有设置边界，所以我认为这是另外一回事。。。非常感谢。添加
背景剪辑：填充框