Help - Code briefly popping up on page load and disappearing on desktop but stays in mobile

All of a sudden there is the code showing on the homepage and I'm not exactly sure where the error in code is, even after trying to troubleshoot on my own. 

The two following places: 

1. Home page settings > Advanced > Page Code Injector:

<li><a href="tel:877-374-5452>(919) 332-7568</a></li>

2. Utilities > Website Tools > Code Injection > Header:

<!-- Add contact info in header -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css">

<ul class="kl-topnav mobileHide">
  <li><a href="tel:919-332-7568"><i class="fa fa-phone" aria-hidden="true"></i>  <span style="text-decoration: underline; padding-right: 80px;">(919) 332-7568</span></a></li>
  <li><a href="/contact"><span  style="text-decoration: underline;"><i class="fa fa-map-marker-alt aria-hidden="true"></i>   6400 Falls of Neuse Rd Suite 200, Raleigh, NC 27615</span></a></li>
</ul>
    
    <ul class="kl-topnav hidedesktop" style="padding: 10px;">
  <li><a href="tel:919-332-7568" style="padding-right: 20px;"><i class="fa fa-phone" aria-hidden="true"></i></a></li>
  <li><a href="/contact"><i class="fa fa-map-marker-alt" aria-hidden="true"></i></a></li>
</ul>
    

<style>
.kl-topnav {
list-style-type: none;
display: flex;
flex-flow: row wrap;
margin-top: 0;
/* padding: 1vw; */
 padding: 9pt;
justify-content: center;
align-content: space-evenly;
background: #495663;
z-index: 10;
position: fixed;
width: 100%;
}

.kl-topnav a {
letter-spacing: .03em;
font-family: halyard-display;
font-size: 16px;
font-weight: 200;
color: #ffffff;
line-height: .5vw;
}
.header .header-announcement-bar-wrapper {
    top: 40px;
}
    
      @media only screen and (min-width: 960px) {
.kl-topnav.hidedesktop {
    display: none;
    }
    }
    @media only screen  and (min-width : 320px)
   and (max-width : 480px) {
    .kl-topnav.mobileHide {
    display: none;
    }
    } 
    
</style>

Can you share link to your site? We can check easier