Position FlexSlider navigation bar at center properly

Question

I working on small project, and have an weird issue that cant resolve myself. I have a flex slider gallery, that is shown images into ribbon bellow main center image. But for some reason, it shown the ribbon not center positioned, and left and right pointers dont work. This is code for that element:

<div class="col-lg-12">
                            <div class="gallery-single-post clearfix">
                                <div class="clearfix" id="slider">
                                    <?php inspiry_list_custom_gallery_images('gallery-post-single'); ?>
                                </div>
                                <?php
                                $size_thumb = 'gallery-post-single-thumb';
                                $gallery_images = rwmb_meta('MEDICAL_META_custom_gallery', 'type=plupload_image&size=' . $size_thumb, $post->ID);
                                if (!empty($gallery_images)) {
                                    ?>
                                    <div id="carousel" class="flexslider">
                                        <ul class="slides">
                                            <?php
                                            foreach ($gallery_images as $gallery_image) {
                                                $caption = (!empty($gallery_image['caption'])) ? $gallery_image['caption'] : $gallery_image['alt'];
                                                echo '<li>';
                                                echo '<img src="' . $gallery_image['url'] . '" alt="' . $gallery_image['title'] . '" />';
                                                echo '</li>';
                                            }
                                            ?>
                                        </ul>
                                    </div>
                                    <?php
                                }
                                ?>
                            </div>
                        </div>

and this is CSS for that element:

.gallery-single #carousel {
  position: absolute;
  bottom: -35px;
  display: block;
  width: 90%;
  margin: auto 33px;
  padding: 0 48px;
  border: none;
  background: none;
 }

This is now looks currently:

and this (user/password is login) is how need to look:

Any help?

Answer 1

To Center the ribbon remove the margin left and right, it's already absolute so you can use left by 50% and then transform to adjust the left position

.gallery-single #carousel {
  position: absolute;
  bottom: -35px;
  display: block;
  width: 90%;
  margin: 0;
  padding: 0 48px;
  border: none;
  background: none;
  left: 50%;
  transform: translateX(-50%);
}