Extra spacing after element when using max-width w/ background

Question

The title of the post most likely isn't sufficient. Please edit and/or comment if another suits my question better.

Question:

Why is there extra space after the 2nd word on the first line? I would like it to be flush (padding applied).

• I'm using bootsrap v3.3. I have a hero image (used as background), followed by a .container, then a wrapper element that is absolute positioned (solely vertical at first).
• Inside the wrapper element there is an h1.
• The #heroBox has the background applied.
• I've tried to move the styles for padding, background-color, etc to the h1 instead of the #heroBox, but still get the same effect.
• I have tried adding width:auto to the #heroBox, along w/ other styles
• There is letter-spacing: -1px; on the h1, but removing it does nothing.

---

<div id="mainHero" style="background-image:url(someURL);">
    <div class="container">
        <div id="heroBox" class="">
            <h1>Telehealth Through Teladoc</h1>
        </div>
    </div>
</div>

    #heroBox {
        position: absolute;
        top: 50%; 
        left: 0;
        width: auto; // doesn't work
        max-width: 35%;
        transform: translateY(-50%);
        color: $color-text-offwhite;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.50);
        background-color: #000;
        background: rgba(0, 0, 0, 0.7);
        padding: 10px 30px; // it is not the padding

        h1 {
            margin: 0;
            text-transform: none;
            font-size: 2.5rem; 
            // display: inline; // doesn't work
            // word-wrap: break-work; // doesn't work
        }
    }

    .container {
        position: relative;
        z-index: 100;
    }