CSS for 2x Navigation in same header?

Hey yall,
As you can see I am trying to add the main navigation and a social navigation in the same header. However, I am able to get the main navigation but the social media navigation is broken.
HTML:

Code (text):

<header>

        <h1 class="logo">NAME</h1>              

        <nav id="top-nav">

            <ul>

                <li id="home" class="first"><a href="/">Home</a></li>

                <li class="about"><a href="#">About Me</a></li>

                <li class="music"><a…

CSS for 2x Navigation in same header?

See original post by buckmajor