I'm currently working on a Python/Flask/HTML project that utilizes Bootstrap 4 for a grid system with multiple rows and columns. However, when I attempt to run the project, a few pixels get cut off on the left side of the screen. I've thoroughly checked my code but still can't figure out the reason behind this issue. If anyone could provide some help, I would greatly appreciate it! Here is a jsfiddle containing my code, as well as a hard copy. Thank you in advance for your assistance!
<!DOCTYPE html>
<!-- Link to css file -->
<link rel="stylesheet" type="text/css" href="/static/main.css" mesdia="screen"/>
<!-- Bootstrap CDN-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
<title>Layout</title>
<!--<h1>Welcome to the layout</h1>
<p>Where would you like to navigate to?</p>-->
<div class="row" id="navcols">
<div class="col">
<div class="row h-50">Row</div>
<div class="row h-50">Row</div>
</div>
<div class="col-sm-6">
<div class="row h-100">Row</div>
<div class="row h-100">Row</div>
<div class="row h-100">Row</div>
<div class="row h-100">Row</div>
<div class="row h-100">Row</div>
</div>
<div class="col">
<div class="row">Row</div>
</div>
</div>
<!--
<div class="container-fluid">
<h1 id="test">Welcome to my page! Where do you want to navigate to?</h1>
</div>-->
html,body {
height: 100%;
width: 100%;
}
.col {
background-color:red;
}