Wondering why carousel loses text-align property (value 'center') when changing carousel item's width. I'm new in writing css, need to change the carousel item's width in media sreen and (max-width:480px). I just stuck. Big thanks in advance!
<section class="section-more" id="services">
<div class="more-header">
<img class="more-image" src="img/flowers (2).jpg" alt="">
<p class="text-more">I help agencies and brands to <br> turn their ideas into designs. Great <br> designs
and a healthy freelance relationship.</p>
</div>
<div class="carousel">
<a class="carousel-item" href="#">
<div class="testi">
<div class="img-area">
<img src="img/web design svg.svg" alt="Design">
</div>
<p>Webdesign</p>
<h3>Beautiful and elegant designs with interfaces that are efficient, intuitive and pleasant to
use for the users.</h3>
</div>
</a>
<a class="carousel-item" href="#">
<div class="testi">
<div class="img-area">
<img src="img/web development svg.svg" alt="Design">
</div>
<p>Development</p>
<h3>Custom web development tailored to your specifications, designed to provide a flawless user
experience.</h3>
</div>
</a>
<a class="carousel-item" href="#">
<div class="testi">
<div class="img-area">
<img src="img/mobile app svg.svg" alt="Design">
</div>
<p>Mobile App</p>
<h3>Design and transform website projects into mobile apps to provide a seamless user
experience.
</h3>
</div>
</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$('.carousel').carousel({
padding: 200
});
autoplay();
function autoplay() {
$('.carousel').carousel('next');
setTimeout(autoplay, 5800)
}
});
</script>
</div>
</section>
css
.section-more {
margin: 0;
padding: 0;
background: #e3e1df;
height: 100vh;
}
.more-image {
width: 100%;
height: 200px;
object-fit: cover;
}
.text-more {
color: #434c3e;
font-size: 24px;
font-family: Montserrat;
font-weight: 400;
line-height: 36px;
word-wrap: break-word;
text-align: center;
letter-spacing: 2px;
padding-top: 50px;
height: 158px;
}
.carousel {
height: 600px;
perspective: 250px;
margin: 0 auto;
}
.carousel .carousel-item {
width: 450px;
background: #ffffff;
padding: 50px;
height: auto;
text-align: center;
border-radius: 15px;
}
.img-area {
width: 100px;
height: 100px;
margin: 0 auto;
overflow: hidden;
border-radius: 50%;
border: inset 8px #88a2a5;
}
.img-area img {
width: 99%;
padding-top: 3px;
}
.testi p {
color: #434c3e;
font-size: 36px;
line-height: 1.9;
}
.testi h3 {
font-size: 24px;
margin: 0;
color: #434c3e;
font-family: Montserrat;
}
