带边距的导航栏不会设置为“0”

Question

所以我正在做一个网站，我想尝试在其中包含 bootstrap。我使用了导航栏标签和一些自定义 CSS 但我无法删除边距。所以基本上导航栏因此看起来很奇怪。

代码如下：

Html:


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>
            Hilo | Home</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/styles.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
    </head>
    <body class="body-fr">
        <nav class="navbar" role="navigation">
            <div class="container-fluid nav-container-fr">
                <ul class="nav-nav">
                    <li class="nav-item-fr"><a href="#" class="nav-link nav-size">Home</a></li>
                    <li class="nav-item-fr"><a href="#" class="nav-link nav-size">Streams</a></li>
                    <li class="nav-item-fr"><a href="#" class="nav-link nav-size">Followed</a></li>
                    <li class="nav-item-fr nav-icon-fr"><a href="#" class="nav-link"><i class="lnr lnr-user fs-40"></i></a></li>
                    <li class="nav-item-fr nav-cog-fr"><a href="#" class="nav-link"><i class="lnr lnr-cog fs-40"></i></a></li>
                </ul>
            </div>
        </nav>
    </body> 
</html>

Css:


* {
    margin: 0;
    padding: 0;
}

.body-fr {
    background-color: #333;
}

nav {
    margin: 0;
    padding: 0;
    width: 100%;
}

.navbar {
    margin: 0px;
    padding: 0px;
}

.nav-container-fr {
    width: 100%;
    display: flex;
    justify-content: space-around;
    text-align: center;
    background-color: #222;
}

.nav-nav {
    justify-content: space-around;
    list-style-type: none;
    list-style: none;
    display: inline;
    margin: auto;
    margin-bottom: 5px;
}

.nav-size {
    font-size: 30px;
}

.nav-item-fr {
    text-align: center;
    display: inline-flex;
    margin: 0 30px;
}

.nav-icon-fr {
    margin-top: 5px;
    margin-left: 470px;
    margin-right: -40px;
}

.nav-cog-fr {
    margin-right: -50px;
}

.fs-20 {
    font-size: 20px;
}

.fs-40 {
    font-size: 40px;
}

.fs-60 {
    font-size: 60px;
}

.fs-80 {
    font-size: 80px;
}

.fs-100 {
    font-size: 100px;
}

.fs-120 {
    font-size: 120px;
}

我能得到一些帮助吗？请忽略我乱七八糟的代码，我还是新手 bootstrap，我现在真的不想修复 CSS。

Answer 1

您可以尝试设置：

margin: 0 !important;

或者您可以通过选择器获得更具体的信息。

例如，如果您在 Chrome 中，并右键单击相关元素，您应该会看到它有一个更具体的选择器。

举个例子：

html body nav {
    margin: 20px;
}

比：

更具体

nav {
    margin: 0;
}

因此在这种情况下将应用 20 像素的边距。

带边距的导航栏不会设置为“0”

Navbar with margin wont be set to "0"

html

css

web

bootstrap-5