Custom Container Not Full Width

Question

please take a look at my sample code

HTML

   <div class="custom-container">
        <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>

CSS

.custom-container{
  padding-right: 0;
  padding-left: 0;
  width: 100%,
}
section {
    height:350px;
    padding-top:50px;
    padding-bottom:50px;
}
.parallax-bg-1 {
    background: no-repeat top center fixed;
    color:#fff;
    background-size:cover;
}

containers

}
.custom-container{
  padding-right: 0;
  padding-left: 0;
  width: 100%,
}
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 1600px) {
    .container {
        max-width: 1600px;
    }
}
@media (min-width: 1900px) {
    .container {
        max-width: 1900px;
    }
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1180px;
  }
}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

JS Fiddle: https://jsfiddle.net/unpvuzaq/ (it works just fine in JS Fiddle but on my end it's not)

the picture is in parallax mode but take a look at my web screenshot it still has padding

image resolution 1920x1080

kindly help me.

Answer 1

add CSS outer div container,

.container.body-content{ 
   width: 100%; 
   padding: 0; 
   margin: 0;
}