Overflow Inline Elements: Facebook Login Footer

Question

Future JD is in crisis here. I was hoping I could get some assistance with this project. I am in the middle of cloning the Facebook Login Page, but I can't seem to control the footer's elements from flowing out of the page.

Per the actual Facebook Login footer, the elements seem to condense into a new block when the screen size shrinks. I want to duplicate this layout (obviously).

Any ideas? What am I doing wrong?

Here's the code via Codepen: https://codepen.io/pen?template=JjMvBBj

    footer {
  background-color: #fff;
  color: var(--footer-text);
  padding: 20px 30px;
  max-width: 1200;
  height: 175px;
}

footer ul {
  display: flex;
  justify-content: left;
  align-items: left;
}

footer ul li {
  list-style: none;
  margin: 5px 5px;
}

footer ul li a {
  color: var(--footer-text);
  /* overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; */
}

footer p {
  text-align: left;
  margin-top: 15px;
}

I appreciate the extra eyes on this.