slick.js - CSS trouble with Slick Slider navigation

Question

I'm having trouble with a slick.js display. The "next" arrow is displaying on the left side and doesn't seem to respond positionally when I adjust the right attribute. The "prev" arrow is displaying fine and, as far as I can tell, is being loaded the same way. My dev site is here.

Here's my CSS for this section:

#front-page-slider, #front-page-slider .slide {
    min-height:500px;
}

.width-fixed {
    max-width: 1200px;
    margin: 0 auto;
}

.slider-container {
    position:relative;
}

#join-widget {
    position:absolute;
    text-align:center;
    width: 100%;
    bottom: 0;
}

#gform_wrapper_3 .gform_heading {
    display:none;
}

#join-widget form {
    display:flex;
    justify-content:center;
}

#front-page-slider .slick-prev {
    left: 10px;
}

#front-page-slider .slick-next {
    right: 10px;
}

Answer 1

Your CSS for slick.arrow (in the file theme.min.css) includes left: 10px. To override this, include in your slick.next class the value left: auto.

#front-page-slider .slick-next {
    right: 10px;
    left: auto;
}