Why do my links underline when I remove float:left from the list?

Question

My links underline when I remove float: left from the list here for navigation.

I'm trying to center my footer to the center and I read that I have to remove float: left and make it inline-block, but it makes my links all underlined which I don't want. Why is it doing that, and how can get my bottom footer nav to center align on the page without messing with my top nav?

.nav_links li {
    margin-left: 24px;
}

.nav_links:hover {
   color:#3f8b7b;
   text-decoration: underline;
   font-weight: 600;
}

.nav_links, ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.nav_link li {
    display: inline-block;
    padding: 0px 20px;
}


.nav_link li, a {
    display: inline;
    float: left;
    font-size: 24px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:500;
    margin-left: 24px;
    margin-top: 24px;
    margin-bottom: 36px;
    text-decoration: none;
    color: #191a1a;
}



footer {
   margin: 0 auto;
   height: 48px;
   padding-top: 24px;
   width: 100%;
   text-align: center;
    
}

footer ul {
    margin: 0px;
    padding: 0
}

footer li {
  list-style-type: none;
  line-height: auto;
  height: 16px;
  padding: 0px 10px;
  display: inline;
}


footer li a{
    text-decoration: none;
    color: white;
    font-size: 16px;
}

here's some of the html code as well

    <header>
     <div class="hero">
     <div class="container"> 
    <nav class="navbar">
      <div class="logo"><img src="Logo/logo.svg" alt="vic logo"/>
              </div>
        <ul class="nav_links">
            <li class="active"> 
                <a href="index.html" class="nav_link">home</a>
                <li>
                 <a href="stills.html" class="nav_link">stills</a>
                </li>
                <li>
                   <a href="designs.html" class="nav_link">designs</a>
                </li>
            </ul>
            </nav>
            <!--main content begins-->
            <main> 
            <div class="hero_text">
            <h1>vic</h1>
            <h2>designer</h2>
            </div>
        
            <br>
            <br>
            <!--footer-->
            <footer> 
            <ul> 
             <li><a href="#" target="_blank" class="social_linkedin">LinkedIn</a></li>
            <li><a href="#" target="_blank" class="social_github">GitHub</a></li>
            <li><a href="#" class="social_artstation>ArtStation</a></li>
            </ul>
          </footer>
      
           </header>

I tried to remove float: left but then my links became underlined. I haven't been able to figure out how to center teh bottom footer nav without messing with the top.

Answer 1

I think here is the problem.

.nav_links:hover {
   color:#3f8b7b;
   text-decoration: underline;
   font-weight: 600;
}

You set text-decoration: underline; which is each time you move your mouse on the link, it show the underline.

Try to set that to text-decoration: none; then remove this float: left; under .nav_link li, a{} style.

.navbar {
  background-color: #292929;
 height: 70px;
}
.nav_links li {
    margin-left: 24px;
}

.nav_links:hover {
  color:#3f8b7b;
  text-decoration: none;
  font-weight: 600;
}

.nav_links, ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.nav_link li {
    display: inline-block;
    padding: 0px 20px;
}

.nav_link li, a {
    display: inline;
    font-size: 24px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:500;
    margin-left: 24px;
    margin-top: 24px;
    margin-bottom: 36px;
    text-decoration: none;
    color: #191a1a;
}

 <ul class="nav_links">
           <li class="active"> 
               <a href="index.html" class="nav_link">home</a>
               <li>
                <a href="stills.html" class="nav_link">stills</a>
               </li>
               <li>
                  <a href="designs.html" class="nav_link">designs</a>
               </li>
           </ul>

Hope this could help you.