why justify-content:center not working when adding an image in the content?

Question

I am creating the page using flex, as I am in the learning process
I want the content in the parent banner class to be in the middle of a div which has 3 childs class="quick-link" class="carousel slide" class="article"

Currently, they are at the left of an div

When I add an image in the content, the div are not occupying the full width of a div.
Can it be because I have given some width to an image?

I have given the d-flex to the main parent in HTML structure and trying to apply the justify-content: center; so that all the child in the parent get in the middle

Can anyone tell me, what am I doing wrong?

HTML Code:

<main>
    <div class="main-container">
        <!-- section 1 - Banner -->
        <div class="banner d-flex">
            <div class="quick-link">
                <p>QUICKLINK</p>
                <p>Fashion & Accessories</p>
                <p>Spa & Massage</p>                    
            </div>
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                  <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                  <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                  <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <img class="d-block w-100" src="images/banner-mobile.jpg" alt="First slide">
                  </div>
                  <div class="carousel-item">
                    <img class="d-block w-100" src="images/banner-mobile.jpg" alt="Second slide">
                  </div>
                  <div class="carousel-item">
                    <img class="d-block w-100" src="images/banner-mobile.jpg" alt="Third slide">
                  </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="sr-only">Next</span>
                </a>
              </div>
            <div class="article">
                <div class="sony-tv banner-img">
                    <img src="images/free.png" alt="" style="width:40%;">
                </div>
                <div class="samsung banner-img">
                    <img src="images/free.png" alt="" style="width:40%;">
                </div>
                <div class="beat-phone banner-img">
                    <img src="images/free.png" alt="" style="width:40%;">
                </div>
            </div>
        </div>
    </div>
</main>

Attaching screenshot how I am getting output: enter image description here

Answer 1

Using display flex, sometimes width works according to content so try using width 100%.

CSS

.d-flex{
 display: flex;
 justify-content: center;
 width: 100%;
}

Answer 2

Would you mind to share your CSS code as well? So that we could take a look into the details of your CSS and find out the best way to solve this.

Base on the given description, I guess the reason that "Currently, they are at the left of an div" happens, is that your main tag's(or other "outter divs", such as div class="main-container") width is not set to be 100% . The purpose of this act, is to tell your main to occupy 100% of it's parent's width. In this case, main tag's parent will be the body tag.

Because once you apply the display:flex property to a parent, the items inside this parent (which is now flex box) will be set to fit it's own minimal width, unless you set them a specific value.

Afterwards, you could set a flex attribute to your three divs (class="quick-link" class="carousel slide" class="article"), to let the browser to know the width for the three divs that you want to present.

TIPS: You could use the built-in inspector from your browser to check your element's properties which will show your elements' occupying width, height and so on. For Firefox and Chrome, the hotkey to do is Ctrl+Shift+C by default.

    <style>
        body{
            margin:0;
        }
        main.widthFixed {
            display: flex;
            justify-content: center;
            width: 100%;
            margin-bottom: 10px;
        }

        p{
            text-align: center;
        }

        .red {
            background-color: #F00;
            flex: 1;
        }

        .green {
            background-color: #0f0;
            flex: 2;
        }

        .blue {
            background-color: #00f;
            flex: 1;
        }

        main.widthNonFixed {
            display: flex;
            justify-content: center;
        }
        .widthNonFixed .red{
            flex: none;
        }
        .widthNonFixed .green{
            flex: none;
        }
        .widthNonFixed .blue{
            flex: none;
        }

    </style>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testing</title>
</head>

<body>
    <main class="widthFixed">
        <div class="red">
            <p>I am flex: 1</p>
        </div>
        <div class="green">
            <p>I am flex: 2</p>
        </div>
        <div class="blue">
            <p>I am flex: 1</p>
        </div>
    </main>

    <main class="widthNonFixed">
        <div class="red">
            <p>I am flex: none</p>
        </div>
        <div class="green">
            <p>I am flex: none</p>
        </div>
        <div class="blue">
            <p>I am flex: none</p>
        </div>
    </main>
</body>

</html>