Change bootstrap nav style to remove the padding right below a nav?

Question

I can't get rid of a padding styled to a bootstrap nav.

I have the following relevant markup for my nav:

<nav id="menu" class="navbar navbar-default" role="navigation">

And I've tried:

.navbar-default {
  padding-bottom: -20px;
  padding-top: -10px;
}

And also:

#menu {
  padding-bottom: -20px;
}

This is how its being displayed:

So I want the blue div displayed right below the nav with any padding.

How can I get it?

This is my whole html for nav and div below:

<nav id="menu" class="navbar navbar-default" role="navigation">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="../index.html">Inicio</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="taylor.html">Aproximación de Taylor</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Aproximación de raíces<b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Bisección</a></li>
                    <li><a href="">Newton Raphson</a></li>
                    <li><a href="#">Secante</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Iteración de Punto Fijo</a></li>
                  </ul>
                </li>
              </ul>

            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>


        <div id="argumentos" class="form-actions">
        <input list="funciones" type="text" autofocus placeholder="Función" id="fx">
        <datalist id="funciones">
            <option value="x**3+4*x**2-10">
            <option value="x**3-x-1">
            <option value="e**(x)+2**(-x)+2*cos(x)-6">
            <option value="e**(x)-x**2+3*x-2">
            <option value="(4*x-7)/(x-2)**2">
        </datalist>
        <input type="text" placeholder="a" id="a" style="width: 50px;">
        <input type="text" class="input-medium" placeholder="b" id="b" style="width: 50px;">
        <input type="text" class="input-medium" placeholder="tolerancia "id="tolerancia" style="width: 75px;">
        <input type="text" class="input-medium" placeholder="Iteraciones máximas" id="iteracionesMaximas" style="width: 140px;">
        <input type="text" class="input-medium" placeholder="Visión en a" id="a-vision" style="width: 75px;">
        <input type="text" class="input-medium" placeholder="Visión en b" id="b-vision" style="width: 75px;">
        <button id="ok" class="btn btn-success">Graficar</button>
        </div>

Answer 1

.navbar {
   margin-bottom: 0px;
}

Answer 2

Its because of margin not the padding. Simply write in your css:

.navbar {margin-bottom:0px;}

Demo