How to get rid of spaces around navbar?-Twitter bootstrap

Goldfish1406
August 18, 2022
97 views
0 votes
2 Answers

recently I’ve been learning to style navbars and it is the most oddly difficult thing I’ve came across in my web development training. In this code I’ve my navbar almost styled but the problem is I’m getting a small white space on the right of the page. I’m confused as to which element might be causing this. I’ve tried everything padding, margin, border, nothing helped. I’ve looked at other answers on Stackoverflow, most of them suggested to add a "margin:0" to the entire body. To make matters even strange, I already have it in there.

Another thing I would like to add is that while coding for this project, I did encounter the white gaps problem many times, but I used a lot of "dirty coding" (for eg: adding margins or paddings to elements inside the navbar to make it look like the navbar is perfectly sticking to the top and to the sides while actually it isn’t). Can someone please explain how do I get the navbar stick perfectly to the top and to the sides while also not having any of the "dirty code". Thanks in advance.

Also guys, since I’m just learning Web Development, my code might look like a complete mess because I don’t know myself where is bootstrap applied and where I’ve Overriden it. Sorry about that.

HTML code:

<!DOCTYPE html>
<html lang="en">

    <!-- META TAGS -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

    <!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

    <!-- FONT AWESOME -->
    <script src="https://kit.fontawesome.com/a2efd1781b.js" crossorigin="anonymous"></script>

    <!-- FONTS -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap" rel="stylesheet"> 

    <link rel="stylesheet" href="css/style.css">
    <title>Stencil.io</title>
</head>
<body>

    <nav class="navbar navbar-collapse-md bg-dark">
        <h1>stencil.io</h1>

        <div class="row navbar-toggler">
            <ul>
                <li><a href="https://www.google.com">Google</a></li>
                <li><a href="https://www.quora.com">Quora</a></li>
                <li><a href="https://youtube.com">Youtube</a></li>
            </ul>
        </div>
    </nav>

    <header>
         <h1 class="title">All your social media at one place.</h1>

        <div class="icons container-fluid">
            <i class="snapchat fa-brands fa-square-snapchat fa-7x"></i>
            <i class=" instagram fa-brands fa-instagram fa-7x"></i>
            <i class=" twitter fa-brands fa-twitter fa-7x"></i>
        </div> 
    </header>
    
</body>
</html>

CSS code:

body{
    padding: 0;
    margin: 0;
     }

  nav{
    color: antiquewhite;
    position: sticky;
    right: 0;
  }

  h1{
    padding: 10px 20px;
  }

  ul{
    list-style: none;
  }

  li{
    padding: 10px;
    display: inline-block;
  }

  a{
    text-decoration: none;
    color: antiquewhite; 
  }

  a:hover{
    color: #FFD39A;
  }

  .title{
    font-family: "Rubik", sans-serif;
    width: 40%;
    margin: 150px 100px;
    float: left;
  }

  i{
    padding: 30px;
  }

  .icons{
    position: relative;
    top: 100px;

  }

Adding an Image for reference:
You Can see the small white gap in the right of the page

Answers

- DamienPuaud
- August 18, 2022 at 11:59 am
- 0 votes
0
I’m betting on bootstrap’s row class that has a sometimes annoying margin-left: -15px and margin-right: -15px. So you have three solutions :

1- Overriding Bootstrap’s row class :
```
.row {
  margin: 0;
}
```
2- Wrapping your .row div in a .container-fluid div (But you might have to change your nav)

3- Best way : Get rid of your .row class (Not sure you need it here btw)

GLOBALLY : You might have to look into bootstrap structure to have a better understanding of how it works. Rows should always (well, nearly) be wrapped in a container or container-fluid in Bootstrap. Missing it is what generally causes this type of horizontal scrolling caused by negative margins on the .row as explained at the beginning of this post.
Login or Signup to reply.