[HTML] - Carousel breaking entire landing page (Debugging Help).

Sorry I really should have tried to be more insightful, but I'm more a less a complete novice when it comes to HTML/CSS/JS so I'm kind of just figuring it out as I go along!

To answer some of your questions: *On the landing page, I'm trying to add a final section which would appear below the top-most section. My idea for this section is to simply have a side-ways scrolling "featured items" carousel comprised of about 7-8 items. I had tried several different implementations (some including bootstrap, which broke things to an even greater extent). I've now settled on a design and implementation which doesn't use Boostrap whatsoever (but uses JQuery and Lightslider to achieve the carousel effect I'm looking for). For transparency, I follow THIS video, which worked well on a blank project but seems to only sit vertically and seemingly breaks all divs and sections in my project.

I'm *pretty sure that the only JS files that may be necessary to look at is the Jquery (not the .min one) and lightslider, as all others were present prior to the implementation of this carousel, so I dont imagine they're to blame.

*With regards to my own troubleshooting, I am completely lost as to where I should begin. The full solution works as expected without the carousel and then it just breaks when its added in. I've tried to move the markup around to see if that makes a difference and it does not.

/r/learnprogramming Thread Parent