padding beside image while using bootstrap/css - html

Question

I am pretty new to web development. I have basic experience with html/css and am using bootstrap to create a website just to kind of teach myself. I want my image to cover the whole page which it does when i decrease the size of the browser but when using full screen it adds padding to the side.
full screen example
i have tried some things to fix it like changing padding to -20px or making overflow-x hidden but can't seem to fix it.
bootstrap code
<div id="banner" class="container-fluid">
<div class="col-lg-12 nopadding">
<img src="images/headercopy.jpeg">
</div>
</div>
css code
html, body {
line-height: 1.8;
background-color: rgb(0, 0, 0);
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
h3 {
text-align: center;
color: white;
}
.nav {
color: white;
}
.navbar-transparent .navbar-brand {
color: white; //nightalreadycolor
}
.navbar-collapse .page-scroll {
color: white; //nightalreadycolor
}
.navbar-transparent .navbar-brand:hover, .navbar-transparent .navbar-brand:focus {
background-color: transparent;
color: #c8e8f4; //light blue
}
.navbar .navbar-transparent .navbar-fixed-type {
background-color: red;
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.aboutimage {
background-size: 100% 100%;
}
img {
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
#about {
color: white;
height: 600px;
margin-right: 15px;
text-align: justify;
}
#about p {
display: block;
font-size: 20px;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
color: white;
}
#about p img {
padding-top: 5px;
outline: solid #f00 1px !important;
}
.container {}
#fleet {
border-right: thin solid black;
color: white;
width: 50%;
height: 600px;
float: left;
background-color: grey;
}
#fleet h1 {
text-align: center;
}
#fleet h2 {
padding-right: 10%;
float: right;
}
#rates {
color: white;
width: 50%;
height: 600px;
float: right;
background-color: #574951;
}
#rates h1 {
text-align: center;
}
#contact {
text-align: center;
height: 600px;
color: white;
background-color: #574951;
}
#reservation {
display: inline-block;
height: 600px;
color: white;
text-align: center;
}
Sorry if some of my code seems to be redundant or inefficient like i said I'm still very new to all of this. If there's any other information you need let me know.

Answer 1

Use images as a background. So if it's the #banner div that you want to fill up, your css will be like this:
#banner {
background-image: url('images/headercopy.jpeg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
Then you just have to use this markup:
<div id="banner" class="container-fluid"></div>
Of course you can set to your css code for the #banner the height you want etc.