Problem with flexslider I have been searching everywhere for an answer to this. I created a views slide show, in Drupal 7, then found out it wasn't working with my responsive theme, so I followed a guide on how to install and use flexslide show modular. Everything worked great, in the preview it shows how it should look but once saved and viewed on website it is showing the nav arrows at the bottom together, not on side of slide show. 

I have cleared cache, tried to edit using a css file, tried to move block to another region, tried to adjust size of images through styles, choose both styles and flex style in image format everything I have tried nothing works. 

I can change the effects of the arrows, but I can not move them to where they should be. I have searched everywhere, but can not find anything on this problem or how to move them. I have included 2 screen shots of the preview in views and live site. Also, the address of the site i'm working on. 

If someone could point me in right direction why this is happening would be great. Thanks!

prntscr.com/dhmdn4 screen shot in views
prntscr.com/dhmde7 screen show of live site

I know that the views shows arrows cropped or missing the top and my pager buttons not center, I can fix that with .css file I created to override my theme I am working on. I just can't figure out why the nav arrows are showing like that.
remove the     

/* position: absolute; */
/* bottom: 0; */
/* right: 0; */


from .flex-direction-nav