Question: I horizontally centered text on a hero image with `margin: 0 auto` but without specifying width. I've read in a bunch of places that this trick only works when width is specified; why is it working in this case? My guess is the width is simply set to the default image width. 

Here's the code I'm using (view [CodePen](https://codepen.io/nataliecardot/pen/PRMvbP) for full code). If I remove everything but the image URL from the CSS ruleset for `.hero-image`, it still works. 

HTML: 

```
<!-- Inside (Bootstrap 4) container-fluid div -->
    <div class="row">
      <div class="col">
        <div class="hero-image">
          <div class="hero-text text-white">
            <h1>Natalie Cardot</h1>
            <h5>Web developer</h5>
          </div>
        </div>
      </div>
    </div>

```

CSS: 

```
.hero-image {
  background-image: url(https://image.ibb.co/fzz87S/laptop_reversed.jpg);
  /* Sets height to full height (100%) of viewport */
  height: 100vh;
  /* Ensures background image spans the full width of the viewport */
  background-size: cover;
  /* Aligns image to center of viewport */
  background-position: center;
  background-repeat: no-repeat;
  /* Enables flex layout */
  display: flex;
  /* Vertically aligns (align-items defines how the browser distributes space between and around flex items along cross-axis of container; works like justify-content but in the perpendicular direction) */
  align-items: center;
}

.hero-text {
  margin: 0 auto;
}

```

Answer: 
Here it's not about the classic `margin:auto` but about flexbox. You container is set with `display:flex` and `.hero-image` is a flex item and it's width is **no more 100%** like a default div but it's equal to size of its content and that's why `margin:auto` is centering your element where you don't need to specify a fixed width.

Some related questions:

[What's the difference between margin:auto and justify-content / align-items center?](https://stackoverflow.com/questions/44244549/whats-the-difference-between-marginauto-and-justify-content-align-items-cent)

[Flex item width flex-direction: column and margin: 0 auto](https://stackoverflow.com/questions/34399560/flex-item-width-flex-direction-column-and-margin-0-auto?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa)
The text is centered because you have `body { text-align: center }`. The reason that the width of the hero text div is not the full width of the browser window is because `.hero-image` is `display: flex`. For the auto margin to do something the div needs to be less than 100% wide. It is, so it works but you don't really need it because the centered text does it for you.

If you remove `display: flex` then you'll see that `.hero-image` becomes 100% wide and your auto margin does nothing because there's no space for L/R margin (note however the text is still centered because of text-align).