100% Width causes div to go off screen while in container

Question

So I'm having a little trouble aligning my div in the container with Bootstrap.

What I'm trying to do is get the div to extend full width inside the container width.

It works on the left side of the container but it doesn't on the right. It goes off-screen.

HTML:

<!-- Image With Action Section -->
    <section class="special_section">
        <div class="container-fluid" style="max-height: 25%">
            <div class="row">
                <div class="col-sm-12">
                    <div class="caption-2">
                        <img src="background-image-url" class="img-full-width img-responsive" alt="" />
                        <div class="container">
                            <div class="action-footer">
                                <div class="col-sm-10">
                                    <h4 class="caption-text">Title</h4>
                                </div>
                                <div class="col-sm-2">
                                    Link
                                </div>
                            </div>
                            <div class="caption">
                                <h4>Title</h4>
                                <p>Content</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

CSS:

.caption-2 .action-footer {
    margin: -1px 0 0 0;
    padding: 10px;
    font-size: 15px;
}
@media (min-width:500px) {
    .caption-2 .action-footer {
        margin:0;
        position: absolute;
        bottom: 0;
        height: 10%;
        width: 100%;
    }
}

.action-footer .col-md-12 {
    margin-top: -10px;
}

The .action-footer div is the one that I need to be 100% width inside the parent container. Instead it get's way too much width.

Answer 1

Just replace the order of container and action-footer to get the desired result also added left:0px to ation-footer so it always start from left of body.

@media (min-width:500px) {
  .caption-2 .action-footer {
    margin: 0;
    position: absolute;
    bottom: 0;
    height: 10%;
    width: 100%;
    left:0px;
  }
}

Here is the working code:

.caption-2 .action-footer {
  margin: -1px 0 0 0;
  padding: 10px;
  font-size: 15px;
}

@media (min-width:500px) {
  .caption-2 .action-footer {
    margin: 0;
    position: absolute;
    bottom: 0;
    height: 10%;
    width: 100%;
    left:0px;
  }
}

.action-footer .col-md-12 {
  margin-top: -10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="special_section">
  <div class="container-fluid" style="max-height: 25%">
    <div class="row">
      <div class="col-sm-12">
        <div class="caption-2">
          <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" class="img-full-width img-responsive" alt="" />
          <div class="action-footer">
            <div class="container">
              <div class="col-sm-10">
                <h4 class="caption-text">Title</h4>
              </div>
              <div class="col-sm-2">
                Link
              </div>
            </div>
            <div class="container">
            <div class="caption">
              <h4>Title</h4>
              <p>Content</p>
            </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 2

You're main problem is actually here:

@media (min-width:500px) {
    .caption-2 .action-footer {
        margin:0;
        position: absolute;
        bottom: 0;
        height: 10%;
        width: 100%;
    }
}

Change it to: position: relative; Having in mind that you are building this for mobile, it should do the job. Whenever using container-fluid, most of the elements have a relative position so they can re-align with the screen width.

Answer 3

You need to apply CSS property box-sizing: border-box;

.action-footer {
    box-sizing: border-box;
}