Div with horizontal scrolling linked to mousewheel - html

Question

I have tried every solution I could find on the web on this subject. I have come to the conclusion that the problem may be that my page contains a scroll-snap-type.
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
This is an overview of the div that I would like to scroll horizontally.
<section id="work">
<h2>WORK</h2>
<div id="carrousel">
<div class==="carr"><img src="./medias/projet1.png" alt="">
<h3>Lorem Ipsum</h3>
<h4>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit rerum voluptas iusto ipsam officiis
earum atque unde nesciunt provident ullam rem ea tempore.</h4>
</div>
<div class="carr"><img src="./medias/projet1.png" alt="">
<h3>Lorem Ipsum</h3>
<h4>Lorem Ipsum<h4>
</div>
<div class="carr"><img src="./medias/projet1.png" alt="">
<h3>Lorem Ipsum</h3>
<h4>Lorem Ipsum</h4>
</div>
<div class="carr"><img src="./medias/projet1.png" alt="">
<h3>Lorem Ipsum</h3>
<h4>Lorem Ipsum</h4>
</div>
</div>
</section>
#carrousel {
display: flex;
flex-direction: row;
height: 70vh;
width: 100vw;
}
#work {
background-color: #0F0F0F;
color: white;
display: flex;
flex-flow: column;
justify-content: center;
}

Answer 1

If I understand you correctly, to fix your issue, you can simply in your CSS (stylesheet) type the following code:
#carrouse1 {
overflow-x: auto;
}
...and do the same thing if you have more than one
If you want to make another section be horizontally scrolled, then just use the same CSS property on that too!