How can I put my picture and my header side by side on the top of the page, but without a huge gap between the two using HTML, CSS, and bootstrap?

I am making a single page portfolio and I want to put the picture and the h1 tag on the same level at the top center of the page so that the image is maybe 15px down and the h1 is beside it about midway down from the top of the picture. What I have thus far is close but there is a huge gap between the image and the h1 text. Below is my html, and the css for it with an image.

HTML:
    <!-- Header image and information -->
<div class="container">
        <div class="row">
              <div class="col-md-4 text-center">
                    <img id="myPic" src="images/Me.jpg" alt="Me" class="img-fluid">
              </div>
              <div class="col-md-8 text-center">
                     <h1>Somebody Jone| Does some crazy stuff!</h1>
              </div>
        </div>
  </div>

CSS:

h1 {
 color: darkslateblue;
 margin:75px 0 0 0;
 padding: 0;
}
#myPic {
 border: 4px inset darkslategray;
 border-radius: 25px;
 height: auto;
 margin: 25px 0 0 0;
 padding: 0;
 width: 150px;
}

Output Image:
    [![Output image][1]][1]


    [1]: https://i.stack.imgur.com/szQx2.png

I would use css flexbox:

<div class="container">
    <div class="row">
        <div class="d-flex text-center">
            <img id="myPic" src="./me.png" alt="Me" class="img-fluid">
            <h1>Somebody Jone| Does some crazy stuff!</h1>
        </div>
    </div>
</div>

If you want the image and text to be in the middle you can add justify-content-center like this:

<div class="container">
    <div class="row">
        <div class="d-flex justify-content-center text-center">
            <img id="myPic" src="./me.png" alt="Me" class="img-fluid">
            <h1>Somebody Jone| Does some crazy stuff!</h1>
        </div>
    </div>
</div>

Is that what you wanted it to look like?