Header not displaying properly in mobile

I’m setting up a site where the logo (which is a little wider than normal) is centered and the main nav is underneath. Everything was great in mobile, with the burger menu displaying properly on the right. Then I added the top bar with social icons and a secondary menu. Now the mobile view is messed up. The social icons display in the main area on the right and push the burger menu icon under the logo. I used this CSS to hide the social icons

@media only screen and (max-width: 768px) {
.social_bookmarks { display: none !important; }
}

But that doesn’t fix the problem. The burger menu icon is still pushed over from the right margin and it still shows the rule that separates it from the social icons. I just want it work like it did before I added the top bar. Any ideas?