Extra White space to the right of container class
<p>M trying to build a website in Mvc Asp.net Visual Studio. I tried everything, margin:0; padding:0 etc, but my container class is not getting extended to the full width of the page. There is some white space to its right. I included my own stylesheet 'style.css' - bundling it after the default bootstrap.css file in the bundleconfig. Ive used the reset.css file too. 
I dont have much idea about bootstrap responsive feature - @media, so i dont know if any of those in bootstrap.css is causing the problem.
Here's my code:
<strong>_Layout.cshtml</strong></p>

<pre><code>&lt;body&gt;

    &lt;div class="header"&gt;
        &lt;div class="container"&gt;

            &lt;div class="row"&gt;
                &lt;div class="col-md-2"&gt;
                    &lt;img class="logo" src="~/Content/Images/logo.png" /&gt;
                &lt;/div&gt;
                &lt;div class="col-md-10"&gt;
                    &lt;h1&gt;&lt;span&gt;Kerala&lt;/span&gt;-The Experience of a lifetime&lt;/h1&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class="menu"&gt;
                &lt;ul class="nav"&gt;
                    &lt;li class="active" role="presentation"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                    &lt;li role="presentation"&gt;&lt;a href="#"&gt;Travel Information&lt;/a&gt;&lt;/li&gt;
                    &lt;li role="presentation"&gt;&lt;a href="#"&gt;Seasons&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;

        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="container body-content"&gt;
        @RenderBody()
        &lt;hr /&gt;
        &lt;footer&gt;
            &lt;p&gt;&amp;copy; @DateTime.Now.Year - My ASP.NET Application&lt;/p&gt;
        &lt;/footer&gt;
    &lt;/div&gt;

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>index.cshtml</strong></p>

<pre><code>@{
    ViewBag.Title = "Home Page";
}

&lt;div class="main"&gt;
    &lt;div class="container"&gt;

    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>style.css</strong></p>

<pre><code>html,body {
    margin:0;
    padding:0;
}

.header{
    background-color:#1dbbd3;
    width:100%;

    margin:0;
    padding:0;
}
.container{
    width:100%;
    margin:0;
    padding:0;
    border:1px solid black;
}
.header h1{
    font-size:24px;
    font-style:oblique;
    margin-top:0;
    padding-top:0;
}
.header h1 span{
    font-size:64px;
}
.header .row img{
    height:80px;
    width:100px;
    margin:0;
    padding:0;
}
.header .row .col-md-10{
    color:#1BDA1B;
    text-align:center;
    text-shadow: 4px 4px 4px #aaa;
    /*border:1px solid blue;*/
    margin-left:0;
    padding-bottom:0;
}
.header .menu ul{
    list-style-type:none;
    display:inline-block;
}
.header .menu ul li{
    display:inline-block;
    color:#0d4869;
    margin-right:20px;
}
.header .menu ul li.active{
    background-color:#1BDA1B;
    color:#0d4869;

}
.header .menu li a:hover{
    background-color:#1BDA1B;
}

/**********************Main**********************/
.main{
    background: url(/Content/Images/places8-bekalfort.jpg) no-repeat center center; 
    background-size: cover;
    margin:0;
    padding:0;
    width:100%;
    height:500px;

}
</code></pre>

<p>This is the page on the browser:
<a href="https://i.stack.imgur.com/eMcY2.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eMcY2.jpg" alt="enter image description here"></a></p>

<p>The black line on the screen is the border of the container and it clearly has a margin on its right. Please help resolve this issue. Ive been stuck for so long.</p>