0

So I want the nav section to be inline with the other two nav items so it creates a nice all in line centered vertically footer.

However even though the 2nd and 3rd items are in the center the nav bar is touching the bottom of the footer.

code 

.footer{
    margin-top: auto;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    margin: 0 auto;
    align-items: center;
    background: #000000;
    color: #fff;
    height: 50px;
    margin-bottom: -25px;
}
.footer-nav a{
    font-size: 16px;
    text-decoration: none;
    color:#fff;
    position: relative;
}
.mac{
    text-decoration: none;
    color: #fff;
}
<div class="footer">
     <nav class='footer-nav'>
      <ul>
       <li><a href="index.html">Home</a></li>
       <li><a href="about.html">About</a></li>
       <li><a href="careers.html">Careers</a></li>
       <li><a href="contact.html">Contact</a></li>
      </ul>
     </nav>
     <span>Website Designed by <a class='mac' href='https://machooper.com'>Mac Hooper</a></span>
     <span>Copyright &copy Vegan Restaraunt</span>
    </div>
Gaurav Kandpal
  • 1,250
  • 2
  • 15
  • 33
Mac Hooper
  • 105
  • 1
  • 8

2 Answers2

1

.footer{
    margin-top: auto;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    margin: 0 auto;
    align-items: center;
    background: #000000;
    color: #fff;
    height: 50px;
    margin-bottom: -25px;
}
.footer-nav ul{
list-style:none;
}
.footer-nav ul li{
display:inline;
}
.footer-nav a{
    font-size: 16px;
    text-decoration: none;
    color:#fff;
    position: relative;
}
.mac{
    text-decoration: none;
    color: #fff;
}
<div class="footer">
    <nav class='footer-nav'>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="careers.html">Careers</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>
    <span>Website Designed by <a class='mac' href='https://machooper.com'>Mac Hooper</a></span>
    <span>Copyright &copy Vegan Restaraunt</span>
</div>
Ankit Chaudhary
  • 4,059
  • 1
  • 11
  • 23
  • So they are already inline, the problem I am having is that the nav section doesn't line up with the Copyright Section. – Mac Hooper Jan 30 '20 at 12:43
  • Sorry i didn't get your issue. Can you explain or show the issue?? – Ankit Chaudhary Jan 30 '20 at 12:47
  • Right so the nav section (home about etc.) is stuck to the bottom of the footer see image https://imgur.com/dPAOehn The rest of the nav is in the middle of the footer vertically. – Mac Hooper Jan 30 '20 at 12:58
  • The solution i provided on your code....it is working fine. I guess some other css is doing this. Need more css code from you which is getting applied at footer – Ankit Chaudhary Jan 30 '20 at 13:13
0

you can add this code in your style sheet 

.footer-nav ul li{
display:inline;
padding: 10px; }

display:inline;

property will align your list items

Faizan Sadiq
  • 334
  • 2
  • 12