Container Fluid Not Full Width - css

Question

please take a look at my sample code
<div class="container-fluid">
<section class="parallax-bg-1 text-center" style="background-image:url('https://killtheboredomdotcom.files.wordpress.com/2015/08/skyline-of-rome.jpg?w=1920&h=768&crop=1')">
<h1 class="">Welcome</h1>
<p class="lead">subtitle</p>
</section>
</div>
the picture is in parallax mode but take a look at the screenshot it still has padding.
im trying to achieve the same result as this site: http://remtsoy.com/tf_templates/traveler/demo_v1_7/index.html
JS Fiddle:
http://jsfiddle.net/uf9np3kq/

Answer 1

The default style of container-fluid has padding left and right of 15px. you can override the default behaviour by applying the following style:
.container-fluid{
padding: 0;
}
.container-fluid{
padding: 0 !important;
}
section.parallax-bg-1{
background-size: cover;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<section class="parallax-bg-1 text-center" style="background-image:url('https://killtheboredomdotcom.files.wordpress.com/2015/08/skyline-of-rome.jpg?w=1920&h=768&crop=1')">
<h1 class="">Welcome</h1>
<p class="lead">subtitle</p>
</section>
</div>
</div>

Answer 2

change
<div class="container-fluid">
....
</div>
To
<div class="container-fullwidth">
....
</div>

Answer 3

You might want to use the div class of jumbotron.
<div class="jumbotron">
<div class="container">
<h1>Welcome</h1>
<p>Subtitle>
</div>
</div>
It would look something like this: http://getbootstrap.com/examples/jumbotron/. Then you can apply the styles as you would like.

Answer 4

Just wrap your content in a div.row: http://jsfiddle.net/uf9np3kq/1/

Answer 5

Just swap your <section> and your .container-fluid. Assuming that your section has the background image. See updated fiddle below:
Fiddle
Current:
<div class="container-fluid">
<section>...</section>
</div>
Change to:
<section>
<div class="container-fluid">...</div>
</section>
Note: This also applies to .container not just .container-fluid

Answer 6

<p>if you using vb.net so please go **-Layout.chtml** and find</p>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
<p>and change it to the </p>
<div class="container-fluid">
<section>
#RenderBody()
</section>
</div>
<hr />
<div class="container-fluid">
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
**i hope this method usefull for you..**