How do I center the last flex item in my container?

Question

I need help centering the p element in the the flex footer (the rules are in the 769px media query). I've tried a lot of things to center this element. I've wrapped everything in the footer with a div element and then made the p element a flex container to align it along the main axis but that didn't work. Can someone please help me? One more question why does my webpage look bad when it is ran here? Somethings aren't centered somethings aren't aligned.

* {
  box-sizing: border-box;
  cursor: crosshair;
}

html {
  font-size: 16px;
}

a:link {
  text-decoration: none;
}

ul {
  list-style-type: none;
}


/***** STYLES ALL CONTAINERS HAVE ******/

h2,
h3 {
  text-align: center;
}

li .main-item {
  display: block;
  padding-bottom: 0.45rem;
}


/******* HEADER STYLES  *********/

.main-header {
  width: 100%;
  padding: 0.25rem;
}

.name {
  margin-bottom: 0.50rem;
  margin-top: 0.50rem;
}

.main-header .name,
.main-nav {
  text-align: center;
}

.main-item {
  text-transform: uppercase;
}


/********* MAIN SECTION STYLES  ***********/


/* BANNER STYLES */

.banner {
  width: 100%;
  background-color: #3acec2;
  color: #fff;
}

.logo {
  width: 6.25rem;
  height: 6.25rem;
  margin: 0 auto;
  display: block;
  padding-top: 0.25rem;
}

.headline,
.tagline {
  text-align: center;
}

.headline {
  margin-bottom: -0.50rem;
}

.tagline {
  padding-bottom: 0.25rem;
}


/* CONTAINER  */

.container {
  margin: 0 auto;
  width: 85%;
}


/********** FOOTER  ***************/

.nav,
.copyright,
.main-footer a {
  text-align: center;
}


/*********** MEDIA QUERIES  **********/

@media (min-width: 769px) {
  /******* HEADER STYLES  *********/
  .main-header {
    display: flex;
    flex-direction: column;
  }
  .main-nav {
    display: flex;
    justify-content: center;
  }
  .main-nav li {
    flex-grow: 0.10;
  }
  /*********  MAIN SECTION STYLES  ***********/
  /***** BANNER ******/
  .banner {
    height: 15rem;
    padding-top: 1.30rem;
  }
  .feat-img {
    height: 12.5rem;
    flex-basis: 31.25rem;
  }
  /***** CONTAINER OF COLUMNS *******/
  .container {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
  }
  .col {
    flex-grow: 0.75;
    flex-basis: 35%;
    justify-content: space-between;
  }
  .tertiary {
    order: -1;
    padding-left: 0.5rem;
  }
  .secondary {
    order: -2;
    ;
  }
  .primary {
    flex-grow: 3;
  }
  .feat-img {
    display: block;
    margin: 0 auto;
  }
  /********** FOOTER  ***************/
  .main-footer {
    display: flex;
    justify-content: center;
    background-color: red;
  }
  .nav {
    display: flex;
    flex-direction: column;
  }
  .footerc2 {
    order: 1;
  }
  .tyo {
    order: 1;
  }
}

@media all (min-width: 1025px) {}

<header class="main-header">
  <h1 class="name"><a href="#">Best City Guide</a></h1>
  <ul class="main-nav">
    <li><a class="main-item" href="#">ice cream</a></li>
    <li><a class="main-item" href="#">donuts</a></li>
    <li><a class="main-item" href="#">tea</a></li>
    <li><a class="main-item" href="#">coffee</a></li>
  </ul>
</header>
<!--/.main-header-->

<section class="banner  clearfix">
  <img class="logo" src="img/city-logo.svg" alt="City">
  <h1 class="headline">The Best City</h1>
  <p class="tagline">The best drinks and eats in the best city ever&period;</p>
</section>
<!--/.banner-->
<main>
  <!-- CONTAINER I CHOSE TO USE THE SECTION ELEMENT OVER THE DIV ELEMENT -->
  <section class="container">
    <article class="secondary col">
      <h2>Welcome&excl;</h2>
      <p>Everything in this city is worth waiting in line for&period;</p>
      <p>Cupcake ipsum dolor sit&period; Amet chocolate cake gummies jelly beans candy bonbon brownie candy&period; Gingerbread powder muffin&period; Icing cotton candy&period; Croissant icing pie ice cream brownie I love cheesecake cookie&period; Pastry
        chocolate pastry jelly croissant&period;</p>
      <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar&period; Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll&period; Tootsie roll wafer I love chocolate donuts&period;</p>
    </article>
    <!--/.secondary-->

    <article class="primary col">
      <h2>Great food</h2>
      <img class="feat-img" src="img/treats.svg" alt="Drinks and eats">
      <p>Croissant macaroon pie brownie&period; Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate&period; Wafer lollipop dessert&period; Bonbon jelly beans pudding dessert sugar plum&period; Marzipan toffee drag&#233;e chocolate bar
        candy toffee pudding I love&period; Gummi bears pie gingerbread lollipop&period;</p>
    </article>
    <!--/.primary-->

    <article class="tertiary col">
      <h2>How to get here</h2>
      <p><strong>Plane&colon; </strong>Tiramisu caramels gummies chupa chups lollipop muffin&period; Jujubes chocolate caramels cheesecake brownie lollipop drag&#233;e cheesecake&period;</p>
      <p><strong>Train&colon; </strong>Pie apple pie pudding I love wafer toffee liquorice sesame snaps lemon drops&period; Lollipop gummi bears dessert muffin I love fruitcake toffee pie&period;</p>
      <p><strong>Car&colon; </strong>Jelly cotton candy bonbon jelly&dash;o jelly&dash;o I love&period; I love sugar plum chocolate cake pie I love pastry liquorice&period;</p>
    </article>
    <!--/.tertiary-->
  </section>

</main>



<footer class="main-footer">
  <div class="footerc1">
    <h3>Company</h3>
    <ul class="nav">
      <li><a class="main-item" href="#">About Us</a></li>
      <li><a class="main-item" href="#">Careers</a></li>
      <li><a class="main-item" href="#">Investor Relations</a></li>
    </ul>
  </div>
  <div class="footerc2">
    <h3>Services</h3>
    <ul class="nav">
      <li><a class="main-item" href="#">My Account</a></li>
      <li class="tyo"><a class="main-item" href="#">Track Your Order</a></li>
      <li><a class="main-item" href="#">Credit Card</a></li>
      <li><a class="main-item" href="#">Gift Card</a></li>
    </ul>
  </div>
  <div class="footerc3">
    <h3>Shop</h3>
    <ul class="nav">
      <li><a class="main-item" href="#">Find a Store</a></li>
      <li><a class="main-item" href="#">Store Services</a></li>
      <li><a class="main-item" href="#">Weekly Ad</a></li>
    </ul>
  </div>
  <div class="footerc4">
    <h3>Resources</h3>
    <ul class="nav">
      <li><a class="main-item" href="#">Return Policy</a></li>
      <li><a class="main-item" href="#">Shipping Rates</a></li>
      <li><a class="main-item" href="#">Product Availability &amp; Price</a></li>
    </ul>
    <p class="copyright">&copy;2015 Residents of The Best City Ever.</p>
</footer>

Answer 1

You are missing the last div closing tag in your footer. I suggest wrapping the content of your footer inside a div so the p tag is always centered.

The ul tag has padding, so you need to set padding: 0 in order to keep them centered as well.

You can see the changes in the snippet below:

* {
  box-sizing: border-box;
  cursor: crosshair;
}

html {
  font-size: 16px;
}

a:link {
  text-decoration: none;
}

ul {
  padding: 0;
  list-style-type: none;
}


/***** STYLES ALL CONTAINERS HAVE ******/

h2,
h3 {
  text-align: center;
}

li .main-item {
  display: block;
  padding-bottom: 0.45rem;
}


/******* HEADER STYLES  *********/

.main-header {
  width: 100%;
  padding: 0.25rem;
}

.name {
  margin-bottom: 0.50rem;
  margin-top: 0.50rem;
}

.main-header .name,
.main-nav {
  text-align: center;
}

.main-item {
  text-transform: uppercase;
}


/********* MAIN SECTION STYLES  ***********/


/* BANNER STYLES */

.banner {
  width: 100%;
  background-color: #3acec2;
  color: #fff;
}

.logo {
  width: 6.25rem;
  height: 6.25rem;
  margin: 0 auto;
  display: block;
  padding-top: 0.25rem;
}

.headline,
.tagline {
  text-align: center;
}

.headline {
  margin-bottom: -0.50rem;
}

.tagline {
  padding-bottom: 0.25rem;
}


/* CONTAINER  */

.container {
  margin: 0 auto;
  width: 85%;
}


/********** FOOTER  ***************/

.nav,
.copyright,
.main-footer a {
  text-align: center;
}


/*********** MEDIA QUERIES  **********/

@media (min-width: 769px) {
  /******* HEADER STYLES  *********/
  .main-header {
    display: flex;
    flex-direction: column;
  }
  .main-nav {
    display: flex;
    justify-content: center;
  }
  .main-nav li {
    flex-grow: 0.10;
  }
  /*********  MAIN SECTION STYLES  ***********/
  /***** BANNER ******/
  .banner {
    height: 15rem;
    padding-top: 1.30rem;
  }
  .feat-img {
    height: 12.5rem;
    flex-basis: 31.25rem;
  }
  /***** CONTAINER OF COLUMNS *******/
  .container {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
  }
  .col {
    flex-grow: 0.75;
    flex-basis: 35%;
    justify-content: space-between;
  }
  .tertiary {
    order: -1;
    padding-left: 0.5rem;
  }
  .secondary {
    order: -2;
    ;
  }
  .primary {
    flex-grow: 3;
  }
  .feat-img {
    display: block;
    margin: 0 auto;
  }
  /********** FOOTER  ***************/
  .main-footer {
    background-color: red;
  }
  .footer-content {
    display: flex;
    justify-content: center;
  }
  .nav {
    display: flex;
    flex-direction: column;
  }
  .footerc2 {
    order: 1;
  }
  .tyo {
    order: 1;
  }
}

@media all (min-width: 1025px) {}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Best City Guide</title>
  <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <header class="main-header">
    <h1 class="name"><a href="#">Best City Guide</a></h1>
    <ul class="main-nav">
      <li><a class="main-item" href="#">ice cream</a></li>
      <li><a class="main-item" href="#">donuts</a></li>
      <li><a class="main-item" href="#">tea</a></li>
      <li><a class="main-item" href="#">coffee</a></li>
    </ul>
  </header>
  <!--/.main-header-->

  <section class="banner  clearfix">
    <img class="logo" src="img/city-logo.svg" alt="City">
    <h1 class="headline">The Best City</h1>
    <p class="tagline">The best drinks and eats in the best city ever&period;</p>
  </section>
  <!--/.banner-->
  <main>
    <!-- CONTAINER I CHOSE TO USE THE SECTION ELEMENT OVER THE DIV ELEMENT -->
    <section class="container">
      <article class="secondary col">
        <h2>Welcome&excl;</h2>
        <p>Everything in this city is worth waiting in line for&period;</p>
        <p>Cupcake ipsum dolor sit&period; Amet chocolate cake gummies jelly beans candy bonbon brownie candy&period; Gingerbread powder muffin&period; Icing cotton candy&period; Croissant icing pie ice cream brownie I love cheesecake cookie&period; Pastry
          chocolate pastry jelly croissant&period;</p>
        <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar&period; Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll&period; Tootsie roll wafer I love chocolate donuts&period;</p>
      </article>
      <!--/.secondary-->

      <article class="primary col">
        <h2>Great food</h2>
        <img class="feat-img" src="img/treats.svg" alt="Drinks and eats">
        <p>Croissant macaroon pie brownie&period; Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate&period; Wafer lollipop dessert&period; Bonbon jelly beans pudding dessert sugar plum&period; Marzipan toffee drag&#233;e chocolate
          bar candy toffee pudding I love&period; Gummi bears pie gingerbread lollipop&period;</p>
      </article>
      <!--/.primary-->

      <article class="tertiary col">
        <h2>How to get here</h2>
        <p><strong>Plane&colon; </strong>Tiramisu caramels gummies chupa chups lollipop muffin&period; Jujubes chocolate caramels cheesecake brownie lollipop drag&#233;e cheesecake&period;</p>
        <p><strong>Train&colon; </strong>Pie apple pie pudding I love wafer toffee liquorice sesame snaps lemon drops&period; Lollipop gummi bears dessert muffin I love fruitcake toffee pie&period;</p>
        <p><strong>Car&colon; </strong>Jelly cotton candy bonbon jelly&dash;o jelly&dash;o I love&period; I love sugar plum chocolate cake pie I love pastry liquorice&period;</p>
      </article>
      <!--/.tertiary-->
    </section>

  </main>



  <footer class="main-footer">
    <div class="footer-content">
      <div class="footerc1">
        <h3>Company</h3>
        <ul class="nav">
          <li><a class="main-item" href="#">About Us</a></li>
          <li><a class="main-item" href="#">Careers</a></li>
          <li><a class="main-item" href="#">Investor Relations</a></li>
        </ul>
      </div>
      <div class="footerc2">
        <h3>Services</h3>
        <ul class="nav">
          <li><a class="main-item" href="#">My Account</a></li>
          <li class="tyo"><a class="main-item" href="#">Track Your Order</a></li>
          <li><a class="main-item" href="#">Credit Card</a></li>
          <li><a class="main-item" href="#">Gift Card</a></li>
        </ul>
      </div>
      <div class="footerc3">
        <h3>Shop</h3>
        <ul class="nav">
          <li><a class="main-item" href="#">Find a Store</a></li>
          <li><a class="main-item" href="#">Store Services</a></li>
          <li><a class="main-item" href="#">Weekly Ad</a></li>
        </ul>
      </div>
      <div class="footerc4">
        <h3>Resources</h3>
        <ul class="nav">
          <li><a class="main-item" href="#">Return Policy</a></li>
          <li><a class="main-item" href="#">Shipping Rates</a></li>
          <li><a class="main-item" href="#">Product Availability &amp; Price</a></li>
        </ul>
      </div>
    </div>
    <p class="copyright">&copy;2015 Residents of The Best City Ever.</p>
  </footer>


</body>

</html>

Answer 2

If I understand correct, The footer 'li' elements should be center with reference 'h1/h2/h3'. I didn't changed any of your code.

I just added following and removed respective 'ul' class.

ul { list-style-type: none; padding: 0; margin: 0; }

 .footerc1 .footerc2 footerc3{
            text-align: center;
        }
        * {
            box-sizing: border-box;
            cursor: crosshair;
        }

        html {
            font-size: 16px;
        }

        a:link {
            text-decoration: none;
        }

        ul {
            list-style-type: none;
            padding: 0;
  margin: 0;
        }



        /***** STYLES ALL CONTAINERS HAVE ******/

        h2,
        h3 {
            text-align: center;
        }

        li .main-item {
            display: block;
            padding-bottom: 0.45rem;
        }

        /******* HEADER STYLES  *********/

        .main-header {
            width: 100%;
            padding: 0.25rem;
        }

        .name {
            margin-bottom: 0.50rem;
            margin-top: 0.50rem;
        }

        .main-header .name,
        .main-nav {
            text-align: center;
        }

        .main-item {
            text-transform: uppercase;
        }

        /********* MAIN SECTION STYLES  ***********/

        /* BANNER STYLES */

        .banner {
            width: 100%;
            background-color: #3acec2;
            color: #fff;
        }

        .logo {
            width: 6.25rem;
            height: 6.25rem;
            margin: 0 auto;
            display: block;
            padding-top: 0.25rem;
        }

        .headline,
        .tagline {
            text-align: center;
        }

        .headline {
            margin-bottom: -0.50rem;
        }

        .tagline {
            padding-bottom: 0.25rem;
        }

        /* CONTAINER  */

        .container {
            margin: 0 auto;
            width: 85%;
        }

        /********** FOOTER  ***************/

        .nav,
        .copyright,
        .main-footer a {
            text-align: center;
        }









        /*********** MEDIA QUERIES  **********/

        @media (min-width: 769px) {


            /******* HEADER STYLES  *********/
            .main-header {
                display: flex;
                flex-direction: column;
            }

            .main-nav {
                display: flex;
                justify-content: center;
            }

            .main-nav li {
                flex-grow: 0.10;
            }






            /*********  MAIN SECTION STYLES  ***********/
            /***** BANNER ******/
            .banner {
                height: 15rem;
                padding-top: 1.30rem;
            }

            .feat-img {
                height: 12.5rem;
                flex-basis: 31.25rem;
            }

            /***** CONTAINER OF COLUMNS *******/
            .container {
                display: flex;
                flex-wrap: wrap;
                width: 90%;
            }

            .col {
                flex-grow: 0.75;
                flex-basis: 35%;
                justify-content: space-between;
            }

            .tertiary {
                order: -1;
                padding-left: 0.5rem;
            }

            .secondary {
                order: -2;
                ;
            }

            .primary {
                flex-grow: 3;
            }

            .feat-img {
                display: block;
                margin: 0 auto;
            }

            /********** FOOTER  ***************/
            .main-footer {
                display: flex;
                justify-content: center;
                background-color: red;

            }

            .nav {
                display: flex;
                flex-direction: column;
            }

            .footerc2 {
                order: 1;
            }

            .tyo {
                order: 1;
            }



        }

        @media all (min-width: 1025px) {}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Best City Guide</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <header class="main-header">
        <h1 class="name"><a href="#">Best City Guide</a></h1>
        <ul class="main-nav">
            <li><a class="main-item" href="#">ice cream</a></li>
            <li><a class="main-item" href="#">donuts</a></li>
            <li><a class="main-item" href="#">tea</a></li>
            <li><a class="main-item" href="#">coffee</a></li>
        </ul>
    </header>
    <!--/.main-header-->

    <section class="banner  clearfix">
        <img class="logo" src="img/city-logo.svg" alt="City">
        <h1 class="headline">The Best City</h1>
        <p class="tagline">The best drinks and eats in the best city ever&period;</p>
    </section>
    <!--/.banner-->
    <main>
        <!-- CONTAINER I CHOSE TO USE THE SECTION ELEMENT OVER THE DIV ELEMENT -->
        <section class="container">
            <article class="secondary col">
                <h2>Welcome&excl;</h2>
                <p>Everything in this city is worth waiting in line for&period;</p>
                <p>Cupcake ipsum dolor sit&period; Amet chocolate cake gummies jelly beans candy bonbon brownie candy&period; Gingerbread powder muffin&period; Icing cotton candy&period; Croissant icing pie ice cream brownie I love cheesecake cookie&period; Pastry chocolate pastry jelly croissant&period;</p>
                <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar&period; Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll&period; Tootsie roll wafer I love chocolate donuts&period;</p>
            </article>
            <!--/.secondary-->

            <article class="primary col">
                <h2>Great food</h2>
                <img class="feat-img" src="img/treats.svg" alt="Drinks and eats">
                <p>Croissant macaroon pie brownie&period; Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate&period; Wafer lollipop dessert&period; Bonbon jelly beans pudding dessert sugar plum&period; Marzipan toffee drag&#233;e chocolate bar candy toffee pudding I love&period; Gummi bears pie gingerbread lollipop&period;</p>
            </article>
            <!--/.primary-->

            <article class="tertiary col">
                <h2>How to get here</h2>
                <p><strong>Plane&colon; </strong>Tiramisu caramels gummies chupa chups lollipop muffin&period; Jujubes chocolate caramels cheesecake brownie lollipop drag&#233;e cheesecake&period;</p>
                <p><strong>Train&colon; </strong>Pie apple pie pudding I love wafer toffee liquorice sesame snaps lemon drops&period; Lollipop gummi bears dessert muffin I love fruitcake toffee pie&period;</p>
                <p><strong>Car&colon; </strong>Jelly cotton candy bonbon jelly&dash;o jelly&dash;o I love&period; I love sugar plum chocolate cake pie I love pastry liquorice&period;</p>
            </article>
            <!--/.tertiary-->
        </section>

    </main>



    <footer class="main-footer">
        <div class="footerc1">
            <h3>Company</h3>
            <ul class="">
                <li><a class="main-item" href="#">About Us</a></li>
                <li><a class="main-item" href="#">Careers</a></li>
                <li><a class="main-item" href="#">Investor Relations</a></li>
            </ul>
        </div>
        <div class="footerc2">
            <h3>Services</h3>
            <ul class="">
                <li><a class="main-item" href="#">My Account</a></li>
                <li class="tyo"><a class="main-item" href="#">Track Your Order</a></li>
                <li><a class="main-item" href="#">Credit Card</a></li>
                <li><a class="main-item" href="#">Gift Card</a></li>
            </ul>
        </div>
        <div class="footerc3">
            <h3>Shop</h3>
            <ul class="">
                <li><a class="main-item" href="#">Find a Store</a></li>
                <li><a class="main-item" href="#">Store Services</a></li>
                <li><a class="main-item" href="#">Weekly Ad</a></li>
            </ul>
        </div>
        <div class="footerc4">
            <h3>Resources</h3>
            <ul class="">
                <li><a class="main-item" href="#">Return Policy</a></li>
                <li><a class="main-item" href="#">Shipping Rates</a></li>
                <li><a class="main-item" href="#">Product Availability &amp; Price</a></li>
            </ul>

        </div>

    </footer>
    <p class="copyright">&copy;2015 Residents of The Best City Ever.</p>
    

</body>
</html>