Is there a better way to center horizontally an element?

Question

Good day,

For my website, I have noticed that my div frame was not ideally centered on the screen - something that I haven't realised so far on my smartphone.

I was considering to customise the margin value in my css style file - but maybe that will not be ideal as I don't know the screen width of my users.

Do you have suggestions to have my frame better centered horizontally, as shown on the below picture?

Thanks a lot for your help.

  <div id="fh5co-event" class="fh5co-bg" style="background-image:url(images/img_bg_3.jpg);">
    <div class="overlay"></div>
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-md-offset-2 text-center fh5co-heading animate-box">
          <span>Les dates-cl&eacute;</span>
          <h2>Wedding Events</h2>
        </div>
      </div>
      <div class="row">
        <div class="display-t">
          <div class="display-tc">
            <div class="col-md-10 col-md-offset-1">

              <div class="col-md-6 col-sm-6 text-center">
                <div class="event-wrap animate-box">
                  <h3>Party</h3>
                  <div class="event-col">
                    <i class="icon-calendar"></i>
                    <span>Samedi</span>
                    <span>18.07.2020</span>
                  </div>
                  <div class="event-col">
                    <i class="icon-clock"></i>
                    <span>15:00</span>
                    <span>01:00</span>
                  </div>
                  <p>Le lieu de r&eacute;ception sera r&eacute;v&eacute;l&eacute; d'ici au 15.03.2020.<br>En attendant, vous pouvez deviner o&ugrave; ce dernier aura lieu en participant au <a href="concours.html">concours</a></p>
                  <p>Dress code : glamour chic</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS Code :

#fh5co-counter .event-wrap h3, #fh5co-event .event-wrap h3 {
font-size: 20px;
color: #fff;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
display: block;
padding-bottom: 20px;
text-transform: uppercase;
letter-spacing: 2px;
}

h1, h2, h3, h4, h5, h6, figure {
font-family: "Work Sans", Arial, sans-serif;
font-weight: 400;
margin: 0 0 20px 0;
}

Answer 1

Apparently your question is about the proper use of bootstrap classes to center that element (that's why I reopened the question, since the listed "duplicates" only showed a general CSS solution, without any regard to Bootstrap.

I wonder what these .display-t and .display-tc should do - these are not default bootstrap classes. You didn't add any CSS regarding those (?). I would remove these levels/containers. Immediately after these two you have two opening divs which contain your box as follows:

<div class="col-md-10 col-md-offset-1">
    <div class="col-md-6 col-sm-6 text-center">

The first one is logical, but the second one is not. I would instead (i.e. replacing both) use

<div class="col-md-6 col-sm-6 col-md-offset-3 text-center">

, which should create a 6/12 (= 50%) wide div that is centered by its offset class.