My button is aligned within the flex-box, shouldn't the elements be stacked in a column?
I am working on a timer that features a row with two columns.
One column contains an image while the other consists of a heading, a flexbox with four rectangles, and a button.
However, I want the button to be positioned below the timer but it is currently aligned with it.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stiks</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="../css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container hero">
<div class="row">
<div class="portal col-md-12 col-lg-5">
<img class="img-fluid" src="../assets/download (10).jpg">
</div>
<div class="col-md-12 col-lg-7 align-self-center">
<h2><b>Timer</b></h2>
<div class="d-inline-flex flex-nowrap">
<div class="rect">
<span class="days"></span>
<p>Days</p>
</div>
<div class="rect">
<span class="hours"></span>
<p>Hours</p>
</div>
<div class="rect">
<span class="minutes"></span>
<p>Minutes</p>
</div>
<div class="rect">
<span class="seconds"></span>
<p>Seconds</p>
</div>
</div>
<button class="btn-main" type="button">Start</button>
</div>
</div>
</div>
</body>
</html>
CSS
:root{
--yellow: #fff189;
/* Add more variables here */
}
h1{
font-size: 4.2em;
}
h2{
font-size: 1.75em;
}
/* More CSS styles can be added here */