Question: There is a space between my tabs and content. Not sure what is causing this. I think it may be an issue with the margin. I need this space to be removed.

[![enter image description here](https://i.stack.imgur.com/25hUw.png)](https://i.stack.imgur.com/25hUw.png)

HTML:

```
<div class="container">
   <ul class="nav nav-pills">
     <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
     <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
   </ul>

<div class="tab-content">
     <div id="home" class="tab-pane fade in active">
        <h3>HOME</h3>
           <p>Loreiqua.</p>
     </div>
     <div id="menu1" class="tab-pane fade">
        <h3>Menu 1</h3>
           <p>Ut enim ad mi</p>
     </div>
</div>
</div>

```

CSS:

```
.bootstrap-iso .nav-pills > li {
  float: left;
}
.bootstrap-iso .nav-pills > li > a {
  border-radius: 4px;
}
.bootstrap-iso .nav-pills > li + li {
  margin-left: 2px;
}
.bootstrap-iso .nav-pills > li.active > a,
.bootstrap-iso .nav-pills > li.active > a:hover,
.bootstrap-iso .nav-pills > li.active > a:focus {
  color: #ffffff;
  background-color: #337ab7;
}

```

Answer: 
The problem is your `<h3>` tags. They are adding a padding to the overall. The fix is quite simple; add `overflow:hidden` to your `.tab-content` and this will force that padding to apply within the confines of `.tab-content` instead of above:

```
.tab-content { overflow: hidden; }

```
The problem lies in the Bootstrap 4 tab component, if you inspect the contents of the blank space, there are divs which contain hidden content of next tab in bootstrap 4, there should be a bug fix soon I suppose.