title: element width:100% not working with container/container-fluid
body: <p>Im trying to make an image header with a full width , but the image always take the container width and not 100% width (even if i put the div outside the container). i have tried almost everything and nothing worked and this answers <a href="https://stackoverflow.com/questions/11895476/bootstrap-element-100-width">here</a> didnt help. it may be done if i change the .container width in a custom css but this will ruin the entire site design.</p>
  
  <p>code:</p>
  
  <pre><code>&lt;body style="background-color: #eee"&gt;
  
      &lt;div class='container-fluid'&gt;
  
          &lt;div class="row" style='width: 100%'&gt; 
              &lt;div class='' style='height: 10px; margin: 0 0;padding: 0 0 ; width:100%'&gt;        
                  &lt;img class=''  src="images/shape1.png" style='height: 100%; width:100%; margin-bottom: 13px'&gt;               
              &lt;/div&gt;
          &lt;/div&gt;
  
  
      &lt;div class='row text-center rowStyle' &gt;
  
          &lt;img id='leftLogo'  src="images/kslogo.png"&gt;
          &lt;img id='rightLogo' src="images/kglogo.png"&gt;
  
          &lt;div class='searchContainer'&gt;
           &lt;table class='table-responsive searchTable'&gt;
                  &lt;tr&gt;
                      &lt;td width='15%'&gt;
                          &lt;img class='searchButton'  src="images/btn-search.png" &gt;
                      &lt;/td&gt;
                      &lt;td width='85%'&gt;
                          &lt;input type='text' class="form-control searchInput"&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;                                    
  
          &lt;/div&gt;     
  
          &lt;div class="row " style="margin-top: 40px; margin-left: auto !important;margin-right: auto !important ; width: 76%" &gt;
              &lt;div class="text-center col-md-4 items" &gt;
                  &lt;img src='images/btnlog-in.png' class='buttonsLocation'&gt;
                  &lt;img class="" src="images/Aricles03.png" alt="Generic placeholder image"&gt;        
              &lt;/div&gt;&lt;!-- /.col-lg-4 --&gt;
              &lt;div class="text-center col-md-4 items" &gt;
                  &lt;img src='images/btnlog-in.png' class='buttonsLocation'&gt;
                  &lt;img class="" src="images/Aricles01.png" alt="Generic placeholder image"&gt;
              &lt;/div&gt;&lt;!-- /.col-lg-4 --&gt;
              &lt;div class=" text-center col-md-4 items" style=' position: relative ;'&gt;
                  &lt;img src='images/btnlog-in.png' class='buttonsLocation'&gt;
                  &lt;img class="" src="images/Aricles02.png" style=''&gt;
  
              &lt;/div&gt;&lt;!-- /.col-lg-4 --&gt;
          &lt;/div&gt;&lt;!-- /.row --&gt;
  
  
          &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;div style='height: 80px; margin-top: 84px;padding: 0 0 ; width:100%; background-color:  #e3e3e3;'&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>EDIT: added full code + screenshot</p>
  
  <p><img src="https://i.stack.imgur.com/w9940.png" alt="enter image description here"></p>
  
  <p>Im using bootstrap3  </p>
  
  <p>any help would be appreciated,
  Thanks </p>