Footer items not centered on small sizes, but they are on bigger screens-CodePudding

I found something odd on my website :/ I have a footer that looks quite nice. On bigger screens the items are perfectly centered. However, when I go to a mobile view, it is slightly off (a bit to the right, and if you look at it, you can clearly tell it is not centered).

The html of the page is this:

import * as React from "react"
import * as styles from "./footer.module.css"

import { Link } from "gatsby"

const currentYear = new Date().getFullYear()

const Footer = () => {
  return (
    <footer className={styles.flexFooter}>
      <section className={styles.footerTopSection}>
        <ul className={styles.footerTopList}>
          <li>
            <h4>
              <Link to="/home" className={styles.footerLogo}>
                Humital
              </Link>
            </h4>
          </li>
        </ul>

        <ul className={styles.footerTopList}>
          <li>
            <h4>Over Humital</h4>
          </li>
          <li>
            <Link to="/about">leer ons kennen</Link>
          </li>
        </ul>

        <ul className={styles.footerTopList}>
          <li>
            <h4>Help me</h4>
          </li>
          <li>
            <Link to="/contact">Contacteer ons</Link>
          </li>
          <li>
            <Link to="https://calendly.com/somelink" target="_blank">
              get appointment
            </Link>
          </li>
        </ul>
      </section>
      <section className={styles.footerBottomSection}>
        <div className={styles.footerBottomWrapper}>
          <p>©Copyright {currentYear} Humital - Made with ❤️</p>
          <span>- All Rights Reserved -</span>
        </div>
        <div className={styles.footerBottomWrapper}>
          <Link to="/sitemap">Sitemap</Link>|
          <Link to="/privacy">Privacy Policy</Link>
        </div>
      </section>
    </footer>
  )
}

export default Footer

The CSS for this is pretty simple:

.flexFooter {
  display: flex;
  flex-flow: row wrap;
  margin: 0 auto;
  width: 100%;
}
footer {
  background-color: #2b2b2b;
  opacity: 0.95;
  width: 100%;
  margin-top: auto;
  bottom: 0;
  color: whitesmoke;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: whitesmoke;
  text-transform: lowercase;
  letter-spacing: 0.2px;
}

h4 {
  font-size: clamp(1rem, 1.5vw, 2rem);
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  align-self: center;
}

/*Top Footer*/

.footerTopSection {
  width: 100%;
  text-align: center;
  padding-top: 1rem;
}
.footerTopList {
  width: 100%;
}
.footerTopList li {
  width: 100%;
}
.footerLogo {
  color: #78c0a8;
  font-size: clamp(2rem, 3.3vw, 4rem);
  text-transform: none;
  letter-spacing: normal;
}

/*Bottom footer*/
.footerBottomSection {
  width: 100%;
  padding: 1rem;
  border-top: 1px solid whitesmoke;
  margin-top: 1rem;
  text-align: center;
}
.footerBottomSection > div:first-child {
  margin: 0 auto;
  text-align: center;
}

.footerBottomWrapper {
  text-align: center;
  width: 100%;
  margin-top: 1rem;
}

.footerBottomWrapper a {
  padding: 0.5rem;
  font-weight: bold;
  font-size: 0.8rem;
  text-align: center;
}
.footerBottomWrapper > p,
.footerBottomWrapper > span {
  font-weight: lighter;
}

It's just ab it off on smaller sizes, and I can't see why :( Any help is appreciated! :)

CodePudding user response：

Use the below syntax to center align your footer:

.flexFooter{
  display:flex;
  align-items:center;
  justify-content:center
}

It should work fine on all devices. You may have to add media queries to adjust some pieces of stuff depending on the font sizes and all. Don't forget to add the responsive meta tag. I hope it helps!