Mystery space between flex items

Question

I have two divs inside a flex container and the 2nd one is aligning to the right side of the page, not next to the 1st one.

Since the default value for flex-flow is row and the default value for justify-content is flex-start, I would expect the 2nd div to be aligning next to the first one.

What am I doing wrong here?

Is my scrolling slideshow somehow interfering with the placement of the div with text?

html {
  background-color: white;
}

body {
  width: 1300px;
  margin: 0 auto 0;
}

#container {
  width: 500px;
  overflow: hidden;
  margin: 50px auto;
  background: white;
}

.photobanner {
  height: 270px;
  width: 6748px;
  margin-bottom: 80px;
  font-size: 0px;
}

img {
  margin-right: 2px;
}

.flex-container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 30px;
}

.mission {
  margin: 25px;
  width: 300px;
  height: auto;
}

.mission p {
  font-family: "europa", sans-serif;
  text-align: left;
  font-size: 18px;
  padding: 20px;
  line-height: 125%;
}

.first {
  -webkit-animation: bannermove 60s linear infinite;
  -moz-animation: bannermove 60s linear infinite;
  -ms-animation: bannermove 60s linear infinite;
  -o-animation: bannermove 60s linear infinite;
  animation: bannermove 60s linear infinite;
}

@keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -6268px;
  }
}

@-moz-keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -6268px;
  }
}

@-webkit-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -6268px;
  }
}

@-ms-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -6268px;
  }
}

@-o-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -6268px;
  }
}

img {
  margin-right: 2px;
}

<section class="flex-container">
  <div id="container">
    <!-- Each image is 480px by 270px -->
    <div class="photobanner">
      <img class="first" src="https://www.bartonlewis.com/_imagesfilm/scroll_blue.jpg" alt="blue" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_23rd_st.jpg" alt="23rd st" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_broken_guru.jpg" alt="broken guru" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_church_ave.jpg" alt="church ave" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_nose.jpg" alt="nose" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_pants.jpg" alt="pants" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_i_will_miss_you.jpg" alt="i will miss you" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_network_reality_stars.jpg" alt="network reality all stars" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_kline.jpg" alt="kline" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_queen.jpg" alt="queen" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_water.jpg" alt="water" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_swirls.jpg" alt="swirls" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_robins_egg.jpg" alt="robins egg" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_ports.jpg" alt="ports" />
    </div>
  </div>
  <div class="mission">
    <p>text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here </p>
  </div>
</section>

Michael Benjamin · Accepted Answer · 2017-10-01T16:02:15.467

The problem is you have a right auto margin on the first flex item:

#container {
    width: 500px;
    overflow: hidden;
    margin: 50px auto; <-- problem here; flex auto margins
    background: white;
}

Based on how auto margins work in a flex container, this automatically pushes its siblings as far away as possible. Try this instead:

#container {
    width: 500px;
    overflow: hidden;
    margin: 50px 0; <-- remove the horizontal auto margins
    background: white;
}

https://jsfiddle.net/z8jte8sb/

Mystery space between flex items

1 Answers1