rails bootstrap navbar custom css
<p>I'm trying to customize my bootstrap navbar. I tried writing a navbar-custom class which worked for the most part, but for some reason it's failing to get rid of this mysterious whitespace underneath the navbar. </p>

<p><a href="https://i.stack.imgur.com/5LDOC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5LDOC.png" alt="enter image description here"></a></p>

<p>It works when I add the styling directly like so:</p>

<pre><code>&lt;div class="navbar navbar-custom" style="margin-bottom: 0;"&gt;
</code></pre>

<p>But otherwise navbar-custom class itself won't do the job. What could be the problem?</p>

<p>One more question: This mysterious gray box appears when I click open a dropdown menu, click close it, and move the mouse away. I'm not sure which css is responsible for this.</p>

<p><a href="https://i.stack.imgur.com/0uD1X.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0uD1X.png" alt="enter image description here"></a></p>

<p>custom.css.scss</p>

<pre><code>@import 'colors';

    /* Nav Bar */

    .navbar-custom {
        background-color: $light_navy;
        border-radius: 0;
        border: 0;
        margin-bottom: 0;
    }

    .navbar-custom .navbar-nav &gt; li &gt; a {
        color: white;   
    }

    .navbar-custom .navbar-nav &gt; li &gt; a:hover {
        color: $rnc_orange;
        background-color: transparent;
    }

    .navbar-custom .navbar-nav &gt; .close &gt; a,
    .navbar-custom .navbar-nav &gt; .close &gt; a:hover,
    .navbar-custom .navbar-nav &gt; .close &gt; a:active,
    .navbar-custom .navbar-nav &gt; .close &gt; a:focus {
        background-color: transparent;
    }

    .navbar-custom .navbar-nav &gt; .open &gt; a,
    .navbar-custom .navbar-nav &gt; .open &gt; a:hover,
    .navbar-custom .navbar-nav &gt; .open &gt; a:active,
    .navbar-custom .navbar-nav &gt; .open &gt; a:focus {
        background-color: transparent;
    }

    .navbar-custom .navbar-nav .dropdown .dropdown-menu &gt; li &gt; a:hover{
        color: $rnc_orange;
        background-color: transparent;
    }

    .navbar-custom .navbar-nav .dropdown .dropdown-menu &gt; .close &gt; a,
    .navbar-custom .navbar-nav .dropdown .dropdown-menu &gt; .close &gt; a:hover,
    .navbar-custom .navbar-nav .dropdown .dropdown-menu &gt; .close &gt; a:active,
    .navbar-custom .navbar-nav .dropdown .dropdown-menu &gt; .close &gt; a:focus {
        background-color: transparent;
    }

    .navbar-custom .navbar-nav .dropdown .dropdown-menu &gt; .open &gt; a,
    .navbar-custom .navbar-nav .dropdown .dropdown-menu &gt; .open &gt; a:hover,
    .navbar-custom .navbar-nav .dropdown .dropdown-menu &gt; .open &gt; a:active,
    .navbar-custom .navbar-nav .dropdown .dropdown-menu &gt; .open &gt; a:focus {
        background-color: transparent;
    }
</code></pre>

<p>application.html.erb</p>

<pre><code>  &lt;head&gt;
    &lt;title&gt;Rush N Catch&lt;/title&gt;

    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;meta name="description" content=""&gt;
    &lt;meta name="author" content=""&gt;

    &lt;%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %&gt;
    &lt;%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %&gt;
    &lt;%= csrf_meta_tags %&gt;

    &lt;!-- jQuery --&gt;
    &lt;script href="assets/js/jquery.js"&gt;&lt;/script&gt;

    &lt;!-- Bootstrap Core JavaScript --&gt;
    &lt;script href="assets/js/bootstrap.min.js"&gt;&lt;/script&gt;

  &lt;/head&gt;
</code></pre>