Here is what I am trying to do but making it responsive.
<div class="topnav" id="myTopnav">
<a href="/" style="position: relative;
bottom: 7px;"><img src="optlogo.png" class="logo"><u style="position: relative;top: -9px;text-decoration: none;"> ARDEN PARK OPTOMETRY</u></a>
<a href="" style="float: right;text-decoration: none;"><i class="material-icons" style="font-size: 1rem; position: relative;top: 2px; color: black;">phone</i> (916) 646 - 9155 </a>
<a href="appointments" style="float: right; border-radius: 12px;border: 3px solid black; background-color:white; padding: 5.5px 5.5px;position: relative;top: 12.8px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1), 0 1.5px 5px 0 rgba(0,0,0,0.1);"><i class="material-icons" style="font-size: 1rem;position: relative;top: 2px; color: black;">mail_outline</i> Appointments</a>
<a href="services" style="float: right;"><i class="material-icons" style="font-size: 1rem;position: relative;top: 2px; color: black;">content_paste</i> Services </a>
<a href="aboutus" style="float: right;"><i class="material-icons" style="font-size: 1rem; position: relative;top: 2px; color: black;">person_outline</i> About Us </a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="tiny material-icons" style="font-size: 2rem;">list</i>
</a>
</div>