Bootstrap container adds padding towards right end of webpage - html

Question

I am using bootstrap for my application and I observe that it adds 15px padding. I looked up at the possible errors and it doesnt seem as if I am making any of these errors (like putting a container inside a row etc)
This is my code.
<div class="container-fluid">
<header id="topheader">
<div class="row">
<div class="col-md-3">
<h3 id="logo"><span id="d1">D</span> <span id="two">2</span> <span id="d2">D</span></h3>
</div>
<div class="col-md-9">
<form id="fullform">
<div id="formdiv" class="row">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div style="" class="col-md-3 login">
<label for="email"></label>
<input class="login_input" type="text" name="email" placeholder="Type your email here">
</div>
<div style="" class="col-md-3 login">
<input class="login_input" type="password" name="password" placeholder="Type your password here">
</div>
</div>
</form>
</div>
</div>
</header>
</div>
I am adding my css too :
body html {
padding: 0;
margin: 0;
/*background-color: black;*/
}
.container-fluid {
padding-right:0px;
padding-left:0px;
margin-right:auto;
margin-left:auto;
}
#topheader {
position: relative;
background-color: #563d7c;
box-shadow: 8px 6px 2px black;
}
#logo {
position: relative;
left: 6vw;
/*top: -3vh;*/
color: white;
}
.login {
position: relative;
/*top: 4vh;*/
height: 12vh;
}
.login_input {
position: absolute;
top: 3vh;
}
#formdiv {
left: 5vw;
}
#d1 {
position: relative;
font-size: 5vh;
transform: rotate(40deg);
}
input{
/*background: #ecf0f1;*/
width: 15vw;
padding: 10px;
font-family: "Open Sans";
color: #7f8c8d;
border-style: solid;
border-width: 0;
border-bottom-width: 3px;
border-color: #bdc3c7;
outline: none;
border-radius: 5px 0px 5px 0px;
-webkit-transition: 0.1s ease-in-out;
}
input:focus{
border-color: #3498db;
color: #34495e;
}
#media screen and (max-width: 989px) {
#logo {
left: 35vw;
}
.login {
position: relative;
/*top: 4vh;*/
height: 7vh;
}
.login_input {
top: -1vh;
left: 25vw;
}
input {
width: 50vw;
}
}

Answer 1

Bootstrap immediately expects row after container-fluid class. And you are adding header tag there. Remove header tag and you can add id="topheader" to the div. row class minus 15 px. Try the following:
<div class="container-fluid">
<div class="row" id="topheader">
<div class="col-md-3">
<h3 id="logo"><span id="d1">D</span> <span id="two">2</span> <span id="d2">D</span></h3>
</div>
<div class="col-md-9">
<form id="fullform">
<div id="formdiv" class="row">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div style="" class="col-md-3 login">
<label for="email"></label>
<input class="login_input" type="text" name="email" placeholder="Type your email here">
</div>
<div style="" class="col-md-3 login">
<input class="login_input" type="password" name="password" placeholder="Type your password here">
</div>
</div>
</form>
</div>
</div>
</div>
If you dont want to remove header tag. Then wrap your container-fluid div into header tag. This will works as well like:
<header id="topheader">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<h3 id="logo"><span id="d1">D</span> <span id="two">2</span> <span id="d2">D</span></h3>
</div>
<div class="col-md-9">
<form id="fullform">
<div id="formdiv" class="row">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div style="" class="col-md-3 login">
<label for="email"></label>
<input class="login_input" type="text" name="email" placeholder="Type your email here">
</div>
<div style="" class="col-md-3 login">
<input class="login_input" type="password" name="password" placeholder="Type your password here">
</div>
</div>
</form>
</div>
</div>
</div>
</header>

Answer 2

Do you asking for this 15px padding that is property of container-fluid class
In that case just over ride the container-fluid class and put padding-left:0 and padding-right:0;
like this,
.container-fluid{
padding-left:0;
padding-right:0;
}
put it in the other file don't change the bootstrap's css file