Adding a social nav bar above my main nav bar - html

Question

I am trying to get my social nav-bar to sit above my main nav bar which I have achieved but the issue I now face is that the main content of the page overlaps the nav bar.
If i add padding to the body it just makes the nav bar move down the page.
I can't for the life of me find what the issue is.. sorry i am learning at the moment so please don't be too harsh. any help would be appreciated.
body {
padding: 50px;
}
.topnav {
text-align: right;
font-family: 'Quicksand', sans-serif;
background: #f4f5eb;
padding: 0 20px;
margin: 0;
overflow: hidden;
}
.social li {
text-align: right;
list-style: none;
display: inline-block;
}
a {
text-decoration: none;
padding: 0 10px;
color: grey;
font-size: 15px;
}
a:hover {
color: rgb(17, 240, 17);
}
.social1 {
font-size: 10px;
color: black;
padding: 5px;
}
.main-nav {
text-align: center;
font-family: 'Quicksand', sans-serif;
padding: 0 40px;
margin: 0;
overflow: hidden;
padding: 15px;
float: left;
}
.main li {
text-align: center;
list-style: none;
display: inline-block;
}
.main1 {
color: black;
}
#logo {
float: left;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 7 !important;
}
.dropdown-content a {
color: grey;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
color: rgb(17, 240, 17);
}
.dropdown:hover .dropdown-content {
display: block;
}
<header>
<nav class="topnav">
<div class="topnav-social">
<ul class="social">
<li>Social Wall</li>
<li>
<a href="https://www.egis-group.com/rss.xml" i class="fas fa-rss"></i>
</a>
</li>
<li>
<a href="https://vimeo.com/channels/egis" i class="fab fa-vimeo-v"></i>
</a>
</li>
<li>
<a href="https://www.youtube.com/channel/UC7htuNSYHgMDr5wkoQMD8lQ" i class="fab fa-youtube"></i>
</a>
</li>
<li>
<a href="https://twitter.com/egis" i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="http://www.linkedin.com/company/egis" i class="fab fa-linkedin-in"></i>
</a>
</li>
<li>
<a href="http://fr.viadeo.com/fr/company/egis?gaid=2012012300803" i class="fab fa-viadeo"></i>
</a>
</li>
<li>
<a href="https://www.facebook.com/egisgroup" i class="fab fa-facebook-f"></i>
</a>
</li>
<li><a class="social1" href="https://www.egis-group.com/talent/join-us" target="_blank">Join Us</a></li>
<li><a class="social1" href="https://www.egis-group.com/contact" target="_blank">Contact</a></li>
<li><a class="social1" href="https://www.egis-group.com/publications" target="_blank">Publications</a></li>
</ul>
</div>
</nav>
<div id=logo>
<img src="images/logo.jpg" width="350" height="100" alt="Brand">
</div>
<nav class="main-nav">
<div class="mainnav-head">
<ul class="main">
<li><a class="main1" href="index.php">Home</a></li>
<?php if((isset($_SESSION['username']) || isCookieValid($db))): ?>
<li>my profile</li>
<li class="dropdown">
Skills By Shift
<div class="dropdown-content">
Traffic Management
Lead Installers/Fiss
Licenses
Other Skills
</div>
</li>
<li class="dropdown">
Risk Assessments/Method Statements
<div class="dropdown-content">
Traffic Management
VSF/Barrier
C'way Repairs
Equiptment
</div>
</li>
<li>Logout</li>
<?php else: ?>
<li><a class="main1" href="">Blog</a></li>
<li><a class="main1" href="">About</a></li>
<li><a class="main1" href="">Egis Projects</a></li>
<li><a class="main1" href="login.php">Login</a></li>
<?php endif ?>
</ul>
</div>
</nav>
</header>

Answer 1

You can achieve this with flexbox.
<div class="full-nav-wrapper">
<div class="social-nav-wrapper">
<div class="social-nav-left">
Social Wall
</div>
<div class="social-nav-right">
Join Us
Contact
Publications
</div>
</div>
<div class="main-nav-wrapper">
<div class="main-nav-logo">
<img src="https://via.placeholder.com/140x100">
</div>
<div class="main-nav-links">
Home
My Profile
Skills By Shift
Risk Assessments/Method Statements
Logout
Blog
About
Egis
Projects
Login
</div>
</div>
</div>
CSS
a {
color:white;
}
.full-nav-wrapper {
border:2px solid purple;
}
.social-nav-wrapper {
background-color:blue;
display:flex;
justify-content: space-between;
}
.social-nav-left {
}
.social-nav-right {
}
.main-nav-wrapper {
background-color:pink;
display:flex;
justify-content: space-between;
align-items:center;
}
.main-nav-logo {
display:flex;
flex-grow: 1;
}
.main-nav-logo > img {
width: 50px;
height: 50px;
}
.main-nav-links {
display:flex;
justify-content: space-around;
flex-grow:3;
}
That's a lot of links though so you would need to work in a responsive technique for proper display on mobile.
#media (max-width:767px) {
.main-nav-wrapper {
flex-wrap: wrap;
}
.main-nav-links {
display: flex;
justify-content: space-around;
}
.main-nav-logo {
justify-content: center;
}
.main-nav-links {
flex-wrap: wrap;
}
}
I think this is what you want to achieve though.
I colored the divs so you can go back and possibly understand what I did.
Learn up on flexbox if you find this code somewhat understandable.
Codepen: https://codepen.io/nolaandy/pen/OqarXY