My Footer is not aligned and it needs fixing so that it is in the center

Question

As seen in this screenshot: https://i.stack.imgur.com/ctRxJ.png

my footer is not aligned to the center and it is really bugging me.

I'll send a screen to how I kinda want it to look. The screenshot -> https://i.stack.imgur.com/hOsaU.png

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

h2,
h3,
a {
  color: #34495e;
}

a {
  text-decoration: none;
}

.logo {
  margin: 0;
  font-size: 1.45em;
}

.main-nav {
  margin-top: 5px;
}

.logo a,
.main-nav a {
  padding: 10px 15px;
  text-transform: uppercase;
  text-align: center;
  display: block;
}

.main-nav a {
  color: #34495e;
  font-size: .99em;
}

.main-nav a:hover {
  color: #718daa;
}

.footer {
  position: -1%;
  padding-top: .5em;
  padding-bottom: .5em;
  border: 1px solid #a2a2a2;
  background-color: #f4f4f4;
  -webkit-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}


/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {
  .footer,
  .main-nav {
    display: flex;
  }
  .footer {
    flex-direction: column;
    align-items: center;
    .footer {
      width: 80%;
      margin: 0 auto;
      max-width: 1150px;
    }
  }
}

@media (min-width: 1025px) {
  .footer {
    flex-direction: row;
    justify-content: space-between;
  }
}

<footer class="footer">

  <ul style="font-size: 10px; text-align: center; margin-left: auto; margin-right: auto; padding-left: 10px; padding-right: 10px;">
    <li><a href="">Cadet Resources</a></li>
    <li><a href="">Apply</a></li>
    <li><a href="">Cadet Login</a></li>
  </ul>
  <ul style="font-size: 10px; text-align: center;  padding-left: 10px; padding-right: 10px;">
    <li><a href="">Contact Us</a></li>
    <li><a href="">Apply</a></li>
    <li><a href="">Cadet Login</a></li>
  </ul>

  <h1 class="logo" style="float: right;"><a style="font-size: 10px; float: right; margin-right: 25px;"> Air Cadets 2019</a></h1>
</footer>

Answer 1

I have cleaned up your code a little bit, to make the layout clear.

<footer class="footer">

  <ul class="column-one">
    <li><a href="">Cadet Resources</a></li>
    <li><a href="">Apply</a></li>
    <li><a href="">Cadet Login</a></li>
  </ul>
  <ul class="column-two">
    <li><a href="">Contact Us</a></li>
    <li><a href="">Apply</a></li>
    <li><a href="">Cadet Login</a></li>
  </ul>

  <h1 class="logo"> Air Cadets 2019</h1>
</footer>

Please note that I have removed inline all inline styles, as it is considered a bad practice, mainly because of maintenance. You can read more on this here: What's so bad about in-line CSS?

footer > ul.column-one {
  margin-right: 10px;
}

footer > ul.column-two {
  margin-left: 10px;
}

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

footer {
  position: -1%;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  border: 1px solid #a2a2a2;
  background-color: #f4f4f4;
  -webkit-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {
  footer {
    display: flex;
    position: relative;
    justify-content: center;
    width: 80%;
    margin: 0 auto;
    max-width: 1150px;
  }

  footer > h1 {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    font-size: 1.45em;
  }
}

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

As you can see you can set margins between the inner columns by applying a left and a right margin to each item individually.

Your picture made clear that you want to position the columns in the center of the footer, regardless of the logo.

That's why I have taken out the logo from the flow by making it an absolute element. This way the element can be positioned without disturbing the positions of the centered columns.

Also you cant mix flex and floats:

3. Flex Containers: the flex and inline-flex display values

A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout.

For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents.

float and clear do not create floating or clearance of flex item, and do not take it out-of-flow.

You can find a working example of your code here:

https://codepen.io/anon/pen/dLJqey

Answer 2

Is this what you are looking for?

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

h2,
h3,
a {
  color: #34495e;
}

a {
  text-decoration: none;
}

.logo {
  margin: 0;
  font-size: 1.45em;
}

.main-nav {
  margin-top: 5px;
}

.logo a,
.main-nav a {
  padding: 10px 15px;
  text-transform: uppercase;
  text-align: center;
  display: block;
}

.main-nav a {
  color: #34495e;
  font-size: .99em;
}

.main-nav a:hover {
  color: #718daa;
}

.footer {
  position: -1%;
  padding-top: .5em;
  padding-bottom: .5em;
  border: 1px solid #a2a2a2;
  background-color: #f4f4f4;
  -webkit-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
}


/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {
  .footer,
  .main-nav {
    display: flex;
  }
  .footer {
    flex-direction: column;
    align-items: center;
    .footer {
      width: 80%;
      margin: 0 auto;
      max-width: 1150px;
    }
  }
}

@media (min-width: 1025px) {
  .footer {
    flex-direction: row;
    justify-content: space-between;
  }
}

<footer class="footer">

  <ul style="font-size: 10px; text-align: center; margin-left: auto; margin-right: auto; padding-left: 10px; padding-right: 10px;">
    <li><a href="">Cadet Resources</a></li>
    <li><a href="">Apply</a></li>
    <li><a href="">Cadet Login</a></li>
  </ul>
  <ul style="font-size: 10px; text-align: center;  padding-left: 10px; padding-right: 10px;">
    <li><a href="">Contact Us</a></li>
    <li><a href="">Apply</a></li>
    <li><a href="">Cadet Login</a></li>
  </ul>

  <h1 class="logo" style="float: right;"><a style="font-size: 10px; float: right; margin-right: 25px;"> Air Cadets 2019</a></h1>
</footer>