html игнорирует css style для div. Хочу что бы высота карт составляла 450px, а на деле их высота 190px. Подскажите что делать в такой ситуации, я не верстальщик, просто нужен frontend для проекта. То как выглядит блок с картами(https://imgur.com/a/FnuVY1B). И есть еще один вопрос кому не сложно, подскажите как можно сделать небольшие отступы между блоками с карточками пытался с помощью bootstrap grid, но по итогу они вплотную находятся друг к другу.
.card{
width: 300px;
height: 450px;
}
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--STYLE-->
<link rel="stylesheet" href="./css/mainStyles.css">
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/Flickity.css">
<!--FONTS-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Belanosima&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<title>CinemaOnline</title>
</head>
<body>
<header class="header d-flex container justify-content-between align-items-center position-absolute" style="height: 90px; z-index: 1;">
<img class="logo" src="../assets/logo.svg" alt="Logo" >
<a href=""><img src="../assets/ProfileButton.svg" alt="" srcset=""></a>
</header>
<section class="slider">
<div class="gallery js-flickity"
data-flickity-options='{ "wrapAround": true }'>
<div class="gallery-cell"
style="background-image: url(../assets/How-long-does-it-take-to-make-a-movie-trailer-explained.jpg);"></div>
<div class="gallery-cell"
style="background-image: url(../assets/photo-1508919801845-fc2ae1bc2a28.jpg);"></div>
</div>
</section>
<section class="content container mt-5">
<h2>Currently playing</h2>
<!-- col-12 col-sm-6 col-lg-3-->
<div class="row" style="height: auto;">
<div class="card text-white col-12 col-sm-6 col-lg-3" style=" background-image: url(../assets/How-long-does-it-take-to-make-a-movie-trailer-explained.jpg); background-position: center;">
<div class="card-header" style="font-size: 24px; text-align: center;"><b>FILM NAME</b></div>
<div class="card-body d-flex flex-column justify-content-end">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white col-12 col-sm-6 col-lg-3" style=" background-image: url(../assets/How-long-does-it-take-to-make-a-movie-trailer-explained.jpg); background-position: center;">
<div class="card-header" style="font-size: 24px; text-align: center;"><b>FILM NAME</b></div>
<div class="card-body d-flex flex-column justify-content-end">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</section>
<script src="./js/flicky.js"></script>
<script src="./js/main.js"></script>
<script src="./js/bootstrap.js"></script>
</body>
</html>