Barton Lewis Barton Lewis - 3 years ago 125
CSS Question

Mystery space between flex items

I have 2 div's 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? Thanks.



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>




Answer Source

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/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download