Bootstrap container not centered

Question

I've been unable to successfully horizontally center a container using bootstrap either by applying mx-auto to the container attribute or by following the solutions provided on this post.

Why would the below code not work, considering I have specified equal 'margins' via the bootstrap column system as described in the linked post?

<div class="container">
    <h1>Example</h1>
    <h3>A collection of my best <a href="academic_portfolio.html">academic</a> and <a
            href="professional_portfolio.html">professional</a> work.</h3>
    <div class="row">

        <div class="col-md-1"></div>
        <div class="col-md-10"><img alt="img desc" src="img.jpg"></div>
        <div class="col-md-1"></div>
    </div>

Originally, my code appeared as:

<div class="container">
    <div class="row ">
        <h1>Example</h1>
        <div class="row ">
            <h3>A collection of my best <a href="academic_portfolio.html">academic</a> and <a
                    href="professional_portfolio.html">professional</a> work.</h3>
            <div class="row justify-content-center">
                <div class="col align-self-center">
                    <img alt="img desc" src="img.jpg">
                </div>
            </div>
        </div>

I am new to bootstrap, but after reading the docs regarding containers and columns I am not sure what the problem could be since this is such a simple layout. It appears as though all elements have some sort of left padding preventing them from being centered appropriately:

Answer 1

In my case this issue was caused because the image size exceeded the constraints of the row, resizing the image solved the problem.