CSS Hero area not centering

[grabrail]

I am realtively new to CSS and learning by building myself a Wordpress Template.

Ive followed a few tutorials, to build a basic theme, but now Im at the stage where I want to customise to how I want it.

I have a Hero section, which I am using to put a logo in, and I want this centred. However for some reason, I cannot get the image to center at all, and I'm trying to figure out why.

here is an image of what my current result is like:
www.techrestore.co.uk/images/screen.png

The PHP I am using for this is:

<div id="hero">
    <div class="container">
        <div class="row">
            <div class="col d-flex align-items-center">
                <a href="<?php bloginfo('url');?>">
                <img src="<?php bloginfo('template_directory');?>/images/logo.png" class="img-fluid"></a>
            </div>
        </div>   
    </div>
</div>

And the CSS

#hero {

    height: 200px;


    @media screen and (min-width:768px)
    {
        height: 250px;
    }

    @media screen and (min-width:1200px)
    {
        height: 300px;
    }
    
    background-color: lightgrey;
    display: flex;
}

There are no other manually assigned CSS properties on the classes or ids in the above php

Cold someone please help me to just understand why the logo is not being centered in the container.

 

[OldMan]

The easiest way to center an object in a container when it's the only thing in the container is to set margin-left to 50%.