Flexslider - Fixed position for next / prev button?

Question

EDIT: I figured out how to stick them to the right upper corner.. but i just can't seem to find the solution so the space between those two buttons will stay the same when i scale the browser.

I'm using the Flexslider in a bootstrap3 template. Everything working just when i scale my browser i just can't get the next and prev button to stick on one position.

HTML:

 <div class="flexslider">
        <ul class="slides">
            <li>
                <img src="images/Slider/Earth_slider.png" />
                <figcaption class="flex-caption-long">
                    <p><h2 class="header-flex">VIDEO, WEB, SERVICE<br>für Raumfahrt, öffentliche Einrichtungen &amp; Industrie</h2></p>
                </figcaption>
            </li>
            <li>
                <img src="images/Slider/Rosetta_slider.png" />
                <figcaption class="flex-caption-middle">
                    <p><h2 class="header-flex">Die Reise des Satelitten Rosetta</h2></p>
                </figcaption>
            </li>
            <li>
                <img src="images/Slider/Showreel_slider.png" />
                <figcaption class="flex-caption">
                    <p><h2 class="header-flex">Showreel 2014</h2></p>
                </figcaption>
            </li>
            <li>
                <img src="images/Slider/DLR_slider.png" />
                <figcaption class="flex-caption-middle">
                    <p><h2 class="header-flex">DLR-DVD "Mars-Ein Planet voller Rätsel"</h2></p>
                </figcaption>
            </li>
            <li>
                <img src="images/Slider/ECMWF_slider.png" />
                <figcaption class="flex-caption-middle">
                    <p><h2 class="header-flex">Weltmarktführer ECMWF</h2></p>
                </figcaption>
            </li>
        </ul>
    </div>

CSS:

.flex-direction-nav a {
  top: 324px;
  margin: 0px;
  height: 50px;
  opacity: 1;
}

// Arrow right - always visible
.flexslider:hover .flex-direction-nav .flex-next {
  left: 93% !important;
}
.flex-next {
  left: 93% !important;
}

// Arrow left - always visible
.flexslider:hover .flex-direction-nav .flex-prev {
  left: 89% !important;
}
.flex-prev {
  left: 89% !important;
}

Answer 1

Try the following - instead of using left use right:

.flex-next {
    right: 10px; 
    left:auto;
}
.flex-prev {
    right: 50px; /*this value should be the width of the buttons can be in percent if needed*/
    left:auto;
    margin-left: -20px; /* this is minus the value of the right for flex-next plus the amount of space you want in between the buttons*/
}

Or instead of positioning the buttons absolutely add the position to the ul (removing all positioning from the next and prev):

.flex-direction-nav {
    position:absolute;
    top: 324px;
    right: 50px;
    text-align:right;
}

.flex-direction-nav li { 
    display:inline-block; 
    margin-left:10px; /*amount of space you want between buttons*/
}