How to remove the space for column on Bootstrap 4 Grid Layout?

Question

I am working on removing the space between Front End Developer and About Me modal. It doesn't seem to to work when I used classes such as no gutter and removing the paddings.

Reference image

Does anyone have any ideas?

<header>
  <div class="row no-gutters">
    <div class="col-md-4 col-sm-12">
      <img class="title-logo" src="./resources/images/logo.jpeg">
    </div>
    <div class="title-super col-md-4 col-sm-12 offset-md-4 text-uppercase text-right">
      <h1>Terence Fan</h1>
      <h4>Front-End Developer</h4>
      <button type="button" class="btn btn-outline-dark button-style" data-toggle='modal' data-target="#AboutMe">About Me</button>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <hr>
    </div>
  </div>
</header>

I have the full Github source code here

Thanks in advance!

Answer 1

Try adding this code to your CSS.

.title-super .btn {
    vertical-align: top;
}