Having problems centering a textbox in CSS

I have the following code in PHP:

                    <div class="col-lg-4 col-sm-6">
                    <br>
                    <a class="portfolio-box">
                        <div class="project-category">test-category</div>
                        <img class="img-fluid" src="assets/img/portfolio/5.jpg" alt="" />
                        <div class="portfolio-box-caption">
                            <div class="br"></div>
                            <div class="project-category text-white-50">test-category</div>
                            <div class="project-name">test-name</div>
                            <div class="br"></div>
                            <div class="project-description">test-description</div>
                            <div class="br"></div>
                        </div>
                    </a>
                </div>

This code creates the following box:

The respective CSS code looks like this:

    #portfolio .container-fluid .portfolio-box .portfolio-box-caption,
    #portfolio .container-sm .portfolio-box .portfolio-box-caption,
    #portfolio .container-md .portfolio-box .portfolio-box-caption,
    #portfolio .container-lg .portfolio-box .portfolio-box-caption,
    #portfolio .container-xl .portfolio-box .portfolio-box-caption {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 95%;
      height: auto;
      position: absolute;
      bottom: 0;
      text-align: center;
      opacity: 0;
      color: #fff;
      background: #963d32;
      transition: opacity 0.25s ease;
      padding-left: 40px;
      padding-right: 30px;
      padding-top: 15px;
      padding-bottom: 15px;
    }

#portfolio .img-fluid {
  max-width: 95%;
  height: auto;
}

However – no matter what I do – the textbox over the picture (as you can see in the picture above) is never perfectly centered.

How can I center the textbox over the picture?

Best

Answer

Changing the margin-left to 2.5% solved the problem for me. Thank you very much @bartholomew

Advertisement

Answer