I’m trying to create a responsive contact us section for a website I’m designing and coding for a local business, but the justify-content-center class from bootstrap v4.5 is not centering the icons in their container. The Bootstrap CSS doc is correctly linked, as is the JS at the bottom. I already have a working navbar, so that’s not the problem.

I save my work and refresh the browser, and I get this (I added a thin border so you can see the container):

justify-content-center malfunction

Here’s my code for that section so far:

<div class="container">
            <h2 class="contact-header">Contact Us</h2>
        </div>
        <div class="container-md">
            <div class="row justify-content-center border">
                <div class="col-4">
                    <a class="phone" href="tel:"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                            class="bi bi-telephone" viewBox="0 0 16 16">
                            <path
                                d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.68.68 0 0 0-.58-.122l-2.19.547a1.75 1.75 0 0 1-1.657-.459L5.482 8.062a1.75 1.75 0 0 1-.46-1.657l.548-2.19a.68.68 0 0 0-.122-.58zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z" />
                        </svg></a>
                </div>
                <div class="col-4">
                    <a href="mailto:" class="email"><svg xmlns="http://www.w3.org/2000/svg"
                            fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
                            <path
                                d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z" />
                        </svg></a>
                </div>
                <div class="col-4">
                    <a href="mailto:" class="schedule"><svg
                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-calendar-event"
                            viewBox="0 0 16 16">
                            <path
                                d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z" />
                            <path
                                d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z" />
                        </svg></a>
                </div>
            </div>
        </div>

I have a div with a container class followed by a div with a row class, just like it’s portrayed in the Bootstrap v4.5 docs:

Bootstrap v4.5 docs example

I’m not sure why I’m getting this error. Any ideas?

I have double and triple-checked my code against the Bootstrap v4.5 docs, but the Contact Us section icons will not center in their container. I tried other variations of the justify-content class such as justify-content-start and justify-content-around, but I got the same result. I suspected that it had something to do with the <svg> tags and their attributes, but when I replaced them with text inside of the anchor tags, I had the same problem.