Navbar with margin wont be set to "0"-CodePudding

So I'm working on a website and I wanted to try including bootstrap in it. I've used the navbar tags and some custom CSS but I can't remove the margin. So basically the navbar looks weird because of it.

Heres the code:

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/[email protected]/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 >
        <nav  role="navigation">
            <div >
                <ul >
                    <li ><a href="#" >Home</a></li>
                    <li ><a href="#" >Streams</a></li>
                    <li ><a href="#" >Followed</a></li>
                    <li ><a href="#" ><i ></i></a></li>
                    <li ><a href="#" ><i ></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;
}

Can I please get some help? And please ignore my messy code I'm still new t bootstrap and I don't really feel like fixing the CSS right now.

CodePudding user response：

You could try setting:

margin: 0 !important;

Or you could get more specific with the selector.

If you are in Chrome for instance, and right click on the element in question, you should see that it has a more specific selector.

Just as an example:

html body nav {
    margin: 20px;
}

Is more specific than:

nav {
    margin: 0;
}

So a margin of 20px would be applied in this case.

CodePudding user response：

Here you go...

I think you want to remove padding not margin. Anyway, whatever you want to do, you always need to add !important in CSS if you want to override Bootstrap default CSS settings.

See the snippet below.

* {
  margin: 0;
  padding: 0;
}

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

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

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

.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;
}

<!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/[email protected]/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 >
  <nav  role="navigation">
    <div >
      <ul >
        <li ><a href="#" >Home</a></li>
        <li ><a href="#" >Streams</a></li>
        <li ><a href="#" >Followed</a></li>
        <li ><a href="#" ><i ></i></a></li>
        <li ><a href="#" ><i ></i></a></li>
      </ul>
    </div>
  </nav>
</body>

</html>