Container neemt te veel breedte

Voor een bootstrap navigatiebalk gebruik ik een afbeelding als navbar-brand. Deze afbeelding heb ik een width van 50% gegeven, maar op de website pakt de container nog steeds de volledige breedte van de gehele afbeelding. Hierdoor schuift de rest van de navigatie te snel onder de afbeelding. Hoe kan ik dit oplossen?

De HTML van de navigatie:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a href="#" class="navbar-brand">
        <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/logo.png">
    </a>
    <button type="button" class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target="#navbar-menu">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbar-menu">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a href="/home" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
                <a href="/blog" class="nav-link">Blog</a>
            </li>
        </ul>
    </div>
</nav>

En de CSS:

.navbar {
    min-height: 250px;
}

.navbar-brand img {
    width: 50%;
}

De pagina waar ik hulp bij nodig heb: [log in om de link te zien]