CSS CSS Flexbox Layout Building a Layout with Flexbox Creating a Sticky Footer with Flexbox

I cant get my Sticky footer to work.

/* Base Styles -------------------- */

  • { box-sizing: border-box; font-family: 'Cabin', sans-serif; }

.myHeader { text-align: center; width: 100%; margin: auto; }

.myHeader img { height: 3rem; }

.myList { padding: 0; list-style: none; }

.myList li { text-transform: uppercase; padding: 10px 20px; border-right: solid; border-right-color: #858085; border-right-width: thin; }

h1 { color: #3f3d88; padding: 0; margin: 0; font-size: 1rem; align-self: center; }

.banner { width: 100%; margin: auto; background: linear-gradient(#3f3d88, transparent 50%), linear-gradient(0deg, #fff, transparent), url(../img/fundoLpc.JPG); background-size: cover; background-repeat: no-repeat; background-position: bottom; height: 70px; }

h3 { margin: 0; }

.mainContent { color: #3f3d88; width: 90%; margin: auto; }

footer { text-align: center;
background-color: #808580; padding: 5px; }

footer p { color: #3f3d88; margin: 0; }

.texto { padding: 10px; background: linear-gradient(to top, lightgrey, transparent 50%) }

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

/* Sticky Footer ------------------ */

body { display: flex; flex-direction: column; min-height: 100vh; }

.mySection { flex: 1; }

/* Pseudo-classes ------------------ */

a:link { color: #3f3d88; text-decoration: none; }

a:visited { color: blue; }

a:hover { color: #bf1818; }

a:active { color: lightcoral; }

/* Media Queries------------------ */

@media (min-width: 600px) {

.myHeader, .myList, .mySection { display: flex; }

.myHeader { flex-direction: column; align-items: center; } .myHeader img { height: 4rem; } h1 { font-size: 1.5rem; } .texto { flex: 1 50%; } .mySection { flex-wrap: wrap; } .banner { height: 150px; } }

@media (min-width: 960px) { .myHeader { flex-direction: row; justify-content: space-between; } .mainContent { max-width: 1000px; margin: auto; } .myHeader img { height: 5rem; } h1 { font-size: 2rem; }
.texto { flex: 1 30%; } }