[Screenshot of white space under div] [1]: https://i.sstatic.net/cO7TV.jpg
I'm having trouble figuring out why there is visible white space here. As a coding beginner, I would really appreciate any assistance. I've tried searching for the solution online but haven't had any success!
body{ background: rgb(245,245,245); color: green; font-size: 25px; font-family: Helvetica; margin: 0; padding: 0; outline: none; border: 0; display: flex; } .card { font-weight: lighter; text-align: center; color: white; background: rgb(50, 50, 50); margin: 0; padding: 20px; }<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Luke's first project</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<link href='https://fonts.googleapis.com/css?family=Bellota' rel='stylesheet'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container-fluid p-0">
<div class="row">
<div class="col">
<div id="banner">
<h1>Welcome to my first project</h1>
<p>This is where I will be learning new skills and putting them into practice!</p>
<p>
<a href="#" class="btn btn-info btn-lg">Start now</a>
</p>
</div>
</div>
<div class="row no-gutters">
<div class="col">
<div class="card">
<h2>Awesome</h2>
<p>Thanks for visiting</p>
</div>
</div><div class="col">
<div class="card">
<h3>Brilliant</h3>
<p>Hope you're impressed</p>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div id="footer">
<p>Thank you for looking through my work and a special thanks to ©Le Wagon for teaching me!</p>
<ul class="list-inline">
<li class="list-inline-item"><a href="#"><i class="fab fa-youtube"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-facebook"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
</div>
</div>
</div>
</div></div>
</body>
</html>