On my front page, I have 4 links that are meant to open modals. However, there is an issue with the positioning of the modals. For example, when clicking on the 'Vente' link, the modal appears at the top of the page and only covers half of the screen with its background. I am struggling to position the modal in the center below the links with the close button on the left side.
I have included both the HTML and CSS code below:
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<title>Nina Beaute BI</title>
</head>
<body>
<div class="square rounded p-5 border border-secondary">
<img src="img/BELIVOIR.png" alt="Nina Beaute" class="center" style="width:200px;">
<ul class="list">
<li><button class="myBtn_multi">Vente</button></li>
<li><button class="myBtn_multi">Inventaire</button></li>
<li><button id="myBtn2">Achat</button><li>
<li><button id="myBtn3">Finance</button></li>
</ul>
<!-- The Modal -->
...
...
<!-- Optional JavaScript; choose one of the two! -->
...
</body>
</html>
CSS
div{ /*CSS styles*/ }
ul { /*CSS styles*/ }
li { /*CSS styles*/ }
button { /*CSS styles*/ }
.list li:last-child { /*CSS styles*/ }
.center { /*CSS styles*/ }
.modal {} //CSS for modal styling
.modal-content {} //CSS for modal content styling
.close {} //CSS for close button styling