css class container makes my image start in middle and does not fill the circle compeletely-CodePudding

This is from cs50. I don't understand why my image starts in the middle instead on the left.

Morever, if I change every container class to containera, it comepletely solves my problem. Not only it starts on the left as expected. It also completely filled the circle with the image.

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
        <link href="styles.css" rel="stylesheet">
        <title>My Webpage</title>
        <style>
.container {
    position: relative;
    width: 50%;

    border: 3px solid #73AD21;
    border-radius: 100%;

}


.container img{
    display: inline;
    width: 100%;
    height: auto;
    border-radius: 100%;

}

                                           
.container .overlay {
    position: absolute;
    border-radius: 200%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #008CBA;

}



.container:hover .overlay {
    opacity: 1;
}


.text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }


        </style>
    </head>


    <body>
        <div >
            <h1>Welcome to CS50 Homepage</h1>
        </div>

        <div >
            <img id="cs50bsh" alt="cs50 british shorthair wink" src= "img_avatar.png" >
 >
            <div >
                <div id="cs50bshtxt" >Hello World From CS50</div>
            </div>
        </div>

    </body>
</html>

I thought maybe container is a special class. Then I go w3school and test out simple stuffs with container class, but it somehow still starts on the left, so maybe I am missing something in my code.

CodePudding user response：

An easy fix would be to add float: left to the container element. That should send the item all the way to the left.