build a proper alignment for a footer

Question

I just review a footer to make it better using a different UI framework. I try to align it but it\'s not properly working. The right side is not is overlapping. I tried using

Answer 1

can you try this:

I added justifyContent: "center"

      followDesc:{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        marginLeft: theme.spacing(2),
        margin: "auto",
      },

oh and you need to get rid of margin on the p element.

try adding somewhere:

p { margin: 0 } or change the p to a div element instead

edit =====

to replicate it like the above do 2 things

add minWidth: 75px in here:

  textFollow: {
    fontSize: "14px",
    fontWeight: "bold",
    textAlign: "center",
    color: "#ff7255",
    fontFamily: "Source Sans Pro",
    minWidth: '75px'
  },

and move this line: <Button className={styles.whiteButton}> join</Button> underneath this line: <div className={styles.followDesc}>

so it looks like this:

<div className={styles.followDesc}>
  <Button className={styles.whiteButton}> join</Button>
  <p className={styles.textFollow}>Follow us</p>
  <FacebookIcon className={styles.socialIcon} />
  <TwitterIcon className={styles.socialIcon} />
  <InstagramIcon className={styles.socialIcon} />
  <LinkedInIcon className={styles.socialIcon} />
</div>