Why has making my carousel narrower created glitchy transition between slides? - css

Question

I'm want my carousel to be a certain size (not sure what size until I play about, but certainly not width: 100%) and also to be centred horizontally in the page.
My new CSS rule has made the carousel smaller and central, but now the slides do not move automatically. The ol with class "carousel-indicators" works fine, so I can select and successfully move to each slide manually.
This same CSS has seemingly removed the click functionality of my next/prev arrows. Even stranger, when I click my next arrow, the page 'smooth-scrolls' down the page a little. Thanks in advance :)
Here is the code....
HTML:
<div id="event-carousel" class="carousel slide" data-right="carousel">
<ol class="carousel-indicators">
<li data-target="#event-carousel" data-slide-to="0"></li>
<li data-target="#event-carousel" data-slide-to="1"></li>
<li data-target="#event-carousel" data-slide-to="2"></li>
<li data-target="#event-carousel" data-slide-to="3"></li>
<li data-target="#event-carousel" data-slide-to="4"></li>
</ol>
<div class="carousel-inner" roll="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="./recources/images/pioneeringSpirit.png" alt="Temporary structures built on the Pioneering Spirit catamaran">
<div class="carousel-caption">
<h3>Pioneering Spirit</h3>
<p>Weeks at sea produced thousands of square meters of temporary hospitality structures.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./recources/images/rugbyWorldCup.png" alt="Main structure for England's Rugby World Cup.">
<div class="carousel-caption">
<h3>Rugby World Cup</h3>
<p>Twickenham is part of the White Rose Crew calander, but this year was special.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./recources/images/thales.png" alt="A three story structure for Farnborough Airshow.">
<div class="carousel-caption">
<h3>Thales</h3>
<p>Our favourite biannual build of the worlds largest airshow.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./recources/images/masterpiece.png" alt="Masterpiece Arts Fair, Chelsea.">
<div class="carousel-caption">
<h3>Masterpiece</h3>
<p>We are proud to be an integral part of this incredible transformation year in, year out.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./recources/images/fieldHospital.jpg" alt="Emergancy hospital built in the Pricipality Stadium.">
<div class="carousel-caption">
<h3>Emergancy Covid-19 Field Hospital</h3>
<p>Helping turn The Pricipality Stadium into Wales largest hospital in just 10 days.</p>
</div>
</div>
<a class="carousel-control-prev" href="#event-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#event-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">next</span>
</a>
</div>
</div>
CSS:
.carousel-inner {
margin: auto;
width: 55%;
height: auto;
}
JS:
$(document).ready(() => {
$('#event-carousel').carousel({
interval: 8000
});
$('#event-carousel').carousel('cycle');
});