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-flowrowjustify-contentflex-startWhat 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>
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
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;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download