Horozontally center a pseudo element (formed as a triangle)

Question

I'm trying to create a "arrow down" figure in CSS and horizontally center it as well. The container is full width (100%). The issue is I can't perfectly center the element. Any idea how this can be achieved?

h2:after{
    border-left: 32px solid transparent;
    border-right: 32px solid transparent;
    border-top: 24px solid #097fc2;
    content: "";
    display: block;
    height: 0;
    left: 48.4%;
    margin: auto;
    position: absolute;
    text-align: center;
    top: 53px;
    width: 0;
    z-index: 1;
}

You can see a working example here, under "PROCEDURES".

Answer 1

Consider using the following CSS. I'm using left to move the item so that it's left edge is at the center-point and margin:0 0 0 -32px to move the element left 32px (half of its width).

h2:after{
    border-left: 32px solid transparent;
    border-right: 32px solid transparent;
    border-top: 24px solid #097fc2;
    content: "";
    display: block;
    height: 0;
    left: 50%;           /* Changed this */
    /* margin: auto;        Removed This */
    margin: 0 0 0 -32px; /* Added this */
    position: absolute;
    text-align: center;
    top: 53px;
    width: 0;
    z-index: 1;
}

.vc_custom_1414444458431 {
    margin-bottom: 0px !important;
    background-color: #097fc2 !important;
}
h2:after {
    border-left: 32px solid transparent;
    border-right: 32px solid transparent;
    border-top: 24px solid #097fc2;
    content:"";
    display: block;
    height: 0;
    left: 50%;
    /* Changed this */
    /* margin: auto;        Removed This */
    margin: 0 0 0 -32px;
    /* Added this */
    position: absolute;
    text-align: center;
    top: 53px;
    width: 0;
    z-index: 1;
}

<div class="vc_row wpb_row vc_inner vc_row-fluid vc_custom_1414444458431">
    <div class="vc_col-sm-12 wpb_column vc_column_container">
        <div class="wpb_wrapper">
            <div class="wpb_text_column wpb_content_element  procedures-title">
                <div class="wpb_wrapper">
                    	<h2 style="text-align: center;">PROCEDURES</h2>

                </div>
            </div>
        </div>
    </div>
</div>