Flex-box justify-content not working whilst align-items does

Question

I'm trying to move around text with justify-content with flex box and whilst align-items works to move the content vertically, justify-content doesn't work to move the content horizontally.

I know I can use text-align, however I don't like how it moves all the text to the far right including the sub-title text, which I want to start at the same place as the title does - I believe this would be what justify-content would do.

CodePen: http://codepen.io/gutterboy/pen/yYxmLP

HTML:

<div id="main-slider" class="carousel">
  <div class="container">
    <div class="row">
      <div class="col-sm-offset-1 col-sm-10">
        <div class="carousel-inner" role="listbox">
          <div class="item item1 active">
            <img src="http://dreamatico.com/data_images/car/car-1.jpg" class="img-responsive" />
            <div class="details flex-row">
              <div class="fix-flex">
                <h2>I'm a header title</h2>
                <p class="sub-title">
                  I'm a little sub-title
                </p>
              </div>
            </div>
          </div>
          <div class="item item2">
            <img src="http://dreamatico.com/data_images/car/car-8.jpg" class="img-responsive" />
            <div class="details flex-row">
              <div class="fix-flex">
                <h2>I'm a header title</h2>
                <p class="sub-title">
                  I'm a little sub-title
                </p>
              </div>
            </div>
          </div>          
        </div>
      </div>
    </div>
  </div>
</div>

<ol class="carousel-indicators">
  <li data-target="#main-slider" data-slide-to="0" class="active"></li>
  <li data-target="#main-slider" data-slide-to="1"></li>
</ol>

CSS:

.item {

  position: relative;

  .details {

    position: absolute;
    top: 0;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 25px;
    color: #fff;
    z-index: 2;
    align-items: flex-end;
    justify-content: center;

    h2 {
      margin-top: 0;
    }

  }

  &.item2 {

    .details {
      align-items: flex-start;
      justify-content: flex-start;      
    }

  }

}

.fix-flex {
  width: 100%;
}

.flex-row {
  display: flex;
  flex-flow: row nowrap;
}

There is more CSS related to the code, but it's related to bootstrap.

Answer 1

After reading @paulie_D's comments I realised it had to do with the fix-flex class which had a style of width: 100%; set and was wrapped around the content I was trying to justify and hence it really couldn't move it.

This was also pointed out by Adrian Eufracio's answer; however removing the div altogether would cause the issue I was trying to prevent; so I had to leave the div in the code but just remove the width: 100%; from the styles and I can now justify the content and the text doesn't wrap.

CodePen: http://codepen.io/gutterboy/pen/jbeOrP

HTML:

<div id="main-slider" class="carousel">
  <div class="container">
    <div class="row">
      <div class="col-sm-offset-1 col-sm-10">
        <div class="carousel-inner" role="listbox">
          <div class="item item1 active">
            <img src="http://dreamatico.com/data_images/car/car-1.jpg" class="img-responsive" />
            <div class="details flex-row">
              <div class="fix-flex">
                <h2>I'm a header title</h2>
                <p class="sub-title">
                  I'm a little sub-title
                </p>
              </div>
            </div>
          </div>
          <div class="item item2">
            <img src="http://dreamatico.com/data_images/car/car-8.jpg" class="img-responsive" />
            <div class="details flex-row">
              <div class="fix-flex">
                <h2>I'm a header title</h2>
                <p class="sub-title">
                  I'm a little sub-title
                </p>
              </div>
            </div>
          </div>          
        </div>
      </div>
    </div>
  </div>
</div>

<ol class="carousel-indicators">
  <li data-target="#main-slider" data-slide-to="0" class="active"></li>
  <li data-target="#main-slider" data-slide-to="1"></li>
</ol>

CSS:

.item {

  position: relative;

  .details {

    position: absolute;
    top: 0;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 25px;
    color: #fff;
    z-index: 2;
    align-items: flex-end;
    justify-content: center;

    h2 {
      margin-top: 0;
    }

  }

  &.item2 {

    .details {
      align-items: flex-start;
      justify-content: flex-start;      
    }

  }

}

.flex-row {
  display: flex;
  flex-flow: row nowrap;
}

Answer 2

The issue you are having is due to your fix-flex class. It has a width of 100%. It is being centered with justify-content:center but since the element is the same size of its container it is not visually obvious that it is working. Check out my fork of your codepen.

Fork of your codepen

This should be removed

.fix-flex {width:100%;}