Why isn't this element centering? [duplicate]

Question

I'm asking this for a class assignment I'm working on, and somehow I've broken CSS so bad that even my teacher is stumped.

body {
  font-family: Georgia, serif;
  background: url("graphics/Background.png");
  margin: 5%;
}

h1 {
  text-align: center;
  padding: 0px 0px 20px 0px;
}

.panel {
  border: 3px solid black;
  width: 500px;
  height: 500px;
  margin: 20px;
}

#container {
  display: flex;
  align-content: space-between;
  justify-content: center;
  background-color: red;
  flex-direction: column;
}

<h1>Sunday Funnies</h1>
<div id="container">
  <img class="panel" src="Graphics/placeholder.png">
  <img class="panel" src="Graphics/placeholder.png">
</div>
</div>

```

This is what I have after my professor did some tinkering to try and figure out what was going on.

Answer 1

align-content targets flex lines, not flex items.

You need to use align-items.

Plus, align-content has no effect in a single-line flex container (i.e., flex-wrap: nowrap).

h1 {
  text-align: center;
}

#container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: red;
}

.panel {
  border: 3px solid black;
  width: 100px;
  height: 100px;
  margin: 20px;
}

<h1>Sunday Funnies</h1>
<div id="container">
  <img class="panel" src="http://i.imgur.com/60PVLis.png">
  <img class="panel" src="http://i.imgur.com/60PVLis.png">
</div>

---

Here's a detailed explanation of cross-axis alignment:

• How does flex-wrap work with align-self, align-items and align-content?

---

From the flexbox spec:

§ 8.4. Packing Flex Lines: the align-content property

The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect on a single-line flex container.

^{(emphasis mine)}