bootstrap 3 justified button group has a tiny gap underneath drop-down button, while within navigation tabs

Question

I am trying to have a justified button group, within the navigation tabs, to display correctly, with Bootstrap 3.3.7. Everything looks good when the button group is outside of the navigation tabs. But as soon as I put the button group within a navigation tab, there would be a small gap underneath the "Dropdown" button, on Windows Chrome. Here is a sample code, and the gap goes away as soon as I delete the entire "remove_me" element. Is there anyway to remove the small gap underneath the "Dropdown" button within the navigation tab, while using any browser like Windows Chrome? Or what's wrong with the code that it would generate a small gap underneath the "Dropdown" button? Thanks in advance!

Sample code

Sample image

<div class="container">
    <div name="remove_me" class="row">
        <div class='col-md-7'>
            <ul id="tabs" class="nav nav-tabs">
                <li class='active'><a href="#main" role="tab" data-toggle="tab">main tab</a></li>
                <li><a href="#sub" role="tab" data-toggle="tab">sub tab</a></li>
            </ul>
        </div>
    </div>

    <div class="tab-content">
        <div class="tab-pane active" role="tabpanel" id="main">
            <div class="row">
                <div class="col-md-7">
                    <div class="btn-group btn-group-justified" role="group">
                        <a href="#" class="btn btn-primary" role="button">Left</a>
                        <a href="#" class="btn btn-primary" role="button">Middle</a>
                        <div class="btn-group" role="group">
                            <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="btn-group btn-group-justified" role="group"><a href="#" class="btn btn-primary" role="button">extra button to show gap above this button</a></div>
                    There is a gap underneath the "Dropdown" button.
                </div>
            </div>
        </div>

        <div class="tab-pane" role="tabpanel" id="sub">sub tab content</div>
    </div>
</div>

Answer 1

Here is jsfiddle. Just try this line of css.

.dropdown-menu{
 margin-top: 0;
}