How to fix horizontal scrollbar caused by jQuery FlexSlider?

Question

jQuery FlexSlider is causing horizontal scrollbar here: http://abhinavsood.com/labs/grab/ I have tried overflow-x: hidden on flex-container but it doesn't seem to solve it.

Can anyone take a look and suggest a fix?

Answer 1

It is actually your .flex-direction-nav .flex-next anchor that is causing it.

I fixed it by applying right: 0; to it.

Answer 2

.flex-direction-nav .flex-next {
background-position: 100% 0;
right: -36px;
}

.flex-direction-nav .flex-prev {
left: -36px;
}

remove the left and right -36px, I don't see any arrows on your page so probably you can remove those elemnts inside flex-direction-nav div