So basically I'm just messing around here using the bootstrap system and there seems to be a small gap on the right side of the screen. There are no box shadows or anything because I saw in one or two other posts that that was causing a similar issue with people.
html,
body,
.container {
height: 100%;
width:
}
.container {
display: table;
min-width: 100%;
overflow: hidden;
min-width: 100%;
margin-top: -50px;
padding: 50px 0 0 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
footer {
background-color: #374754;
height: 75px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
color: white;
text-align: center;
z-index: 1;
}
.row {
height: 100%;
width: 100%;
}
#library {
background: blue;
}
#main {
background: yellow;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-2 no-float" id="library"> library
</div>
<div class="col-sm-10 no-float" id="main"> main</div>
</div>
</div>
<footer>footer</footer>
</body>
</html>I've ripped it apart and I can't seem to figure out what's causing it. Any help is appreciated.