How to Center my Nav bar, and put the social media icons on the side

Question

https://jsfiddle.net/qnw7a9zk/

I'm attempting to put the nav bar in the center, and the social media icons on the side. I've looked up other solutions to this problem, but none also want to put the icons on the side.

If I try to float the nav bar to the left, and the icons to the right, it kind of works, but the nav bar isn't in the center, and if I were to change the size of the window (responsiveness) the bar kind of breaks.

I can only get the icons to the right, but not on the same row as the nav bar, and they are stuck below it.

<div class="wrapper">
  <img class="logo" src="Logo.png" />
  <nav>
    <ul class="nav">
      <li class="navlist"><a href="#">Properties</a></li>
      <li class="navlist"><a href="#">The Team</a></li>
      <li class="navlist"><a href="#">Contact Us</a></li>
    </ul>
    <div class="imgs">
      <a href="#" title="Twitter" alt=" Icon"><img src="Instagram.png" /></a>
      <a href="#" title="Twitter" alt=" Icon"><img src="Facebook.png" /></a>
      <a href="#" title="Twitter" alt=" Icon"><img src="Twitter.png" /></a>
    </div>
  </nav>
</div>
<footer>
  <p class="buttons">Real estate</p>
</footer>
</body>


body {
  background-color: #ffffff;
  margin: 0;
  display: table;
  height: 100%;
  width: 100%;
  background-image: url(nice.jpg);
  background-size: 100% 100%;
  overflow: auto;
}

.wrapper {
  text-align: center;
  padding: 0px;
  height: auto;
  width: 100%;
}

footer {
  background-color: #cbb492;
  display: table-row;
  height: 2px;
  text-align: center;
}

li a {
  text-decoration: none;
  font-variant: small-caps;
  color: black;
}

li:hover {
  background-color: #cbb492;
}

nav {
  width: 100%;
  position: absolute;
  top: 0px;
  padding-bottom: 2px;
  padding-top: 2px;
  background-color: whitesmoke;
}

.logo {
  height: 28px;
  width: 90px;
  padding-top: 50px;
}

p {
  color: white;
  font-size: 6px;
  text-align: left;
  padding-left: 20px;
}

.navlist {
  display: inline;
  padding-left: 30px;
  margin-left: 10px;
  margin-right: 10px;
  padding-right: 30px;
  padding-top: 3px;
  padding-bottom: 2.4px;
}

.nav {
  list-style: none;
  padding: 0;
  width: 100%;
  margin: 0;
  top: 0px;
}

.imgs {
  list-style: none;
  margin: 0;
  display: block;
  padding-left: 0px;
  float: right;
  width: 30%;
}

.imgs img {
  width: 9%;
  height: 9%;
}

Answer 1

You may do it by display: inline-block

body {
  background-color: #ffffff;
  margin: 0;
  display: table;
  height: 100%;
  width: 100%;
  background-image: url(nice.jpg);
  background-size: 100% 100%;
  overflow: auto;
}

.wrapper {
  text-align: center;
  padding: 0px;
  height: auto;
  width: 100%;
}

footer {
  background-color: #cbb492;
  display: table-row;
  height: 2px;
  text-align: center;
}

li a {
  text-decoration: none;
  font-variant: small-caps;
  color: black;
}

li:hover {
  background-color: #cbb492;
}

nav {
  padding-bottom: 2px;
  padding-top: 2px;
  background-color: whitesmoke;
  text-align: center
}

.logo {
  height: 28px;
  width: 90px;
}

p {
  color: white;
  font-size: 6px;
  text-align: left;
  padding-left: 20px;
}

.navlist {
  display: inline;
  padding-left: 30px;
  margin-left: 10px;
  margin-right: 10px;
  padding-right: 30px;
  padding-top: 3px;
  padding-bottom: 2.4px;
}

.nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
}

.imgs {
  list-style: none;
  margin: 0;
  display: inline-block;
  padding-left: 0;
  
}

<div class="wrapper">
  
  <nav>
    <ul class="nav">
      <li class="navlist"><a href="#">Properties</a></li>
      <li class="navlist"><a href="#">The Team</a></li>
      <li class="navlist"><a href="#">Contact Us</a></li>
    </ul>
    <div class="imgs">
      <a href="#" title="Twitter" alt=" Icon"><img src="Instagram.png" /></a>
      <a href="#" title="Twitter" alt=" Icon"><img src="Facebook.png" /></a>
      <a href="#" title="Twitter" alt=" Icon"><img src="Twitter.png" /></a>
    </div>
  </nav>
  <img class="logo" src="Logo.png" />
</div>
<footer>
  <p class="buttons">Real estate</p>
</footer>
</body>

Answer 2

You should try to move the .imgs-div one level higher. Than it should be easier. One approach could be the flexbox model. So the wrapper-container gets

display: flex;
flex-direction: row;
justify-content: space-between;

I just did some more edits. Is this what you wanted to achive? https://jsfiddle.net/qnw7a9zk/6/

Answer 3

You have given width:100% to .nav so it is taking full width and pushes images down. Keep the width ratio maintained in navigation and image. Like 80% navidation and 20 % images, see fiddle https://jsfiddle.net/qnw7a9zk/5/