Remove horizantal scroll bar

Question

I am creating a mock hotel website and I added a carousel to my page to show pictures of different places. I want the pictures to fit the whole page under the navbar. however I got a horizontal scroll bar when i created a Ratings panel. What can I do to remove it?

The panel is under <!--- Panel --> comment https://codepen.io/anon/pen/BogMKq

Answer 1

That is caused by the fact that the .row has negative margin. If you wrap that div inside a .container-fluid the horizontal scroll will disappear.

.container-fluid will keep the parent element's full width, .container instead has a max width which changes with media queries.

For future uses I suggest to properly read the bootstrap documentation about its grid system =)

Answer 2

The page is missing a wrapping .container.

Add a wrapping div with class container and adjust its max-width.

Answer 3

you can use overflow-x: hidden

Answer 4

#main-carousel { overflow: hidden; }

That should do the trick.