<!Doctype html>
<html5>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creative Designs Hub</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/Users/jeevabharathi/Documents/Website/Custom.css">
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
</head>
<body>
<nav>
<h1 style="font-family:Helvetica;">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</h1>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-3 cardpop">
<div class="card img-fluid" style="width:600px; border: none;">
<img class="card-img-top" src="/Users/jeevabharathi/Desktop/image.jpg" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h4 class="card-title">Anna Smith</h4>
<p class="card-text">A brief description goes here.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html5>This is my customized HTML and CSS for an interactive website user interface.
Why am I experiencing white borders around Bootstrap cards even after trying to override them in CSS with no success? How can I fix this issue without resorting to JavaScript modifications?
My code showcase on JSFiddle: https://jsfiddle.net/example123/