标识和标题项的内嵌定位

Question

您好我刚开始尝试建立一个网站。

我正在尝试获取我的Logo中心（我已经完成），然后是徽标右侧的社交媒体按钮（表中的图像）和徽标左侧的另一个图像。问题是社交媒体按钮总是在一个单独的行上，另一个图像也是如此。我确实设法使用以下方法纠正它：

SOCIAL-MEDIA ul{
  float:right; 
  position: relative ;/* Declared position allows for location changes */
  top: -70px;
  }

header #number{
  float:left;
  position: relative ;/* Declared position allows for location changes */
  top: -70px; 
  margin-left:60px; 
}

虽然我不认为这是一种很好的做法，当页面缩小或显示在手机上时，它们会相互影响。

以下是完整代码HTML：

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  padding: 0;
  margin: 0;
}

.container {
  width: 88%;
  Margin: auto;
  overflow: hidden;
}

header {
  background-color: #ffffff;
  padding-top: 30px;
  min-height: 70px;
  border-bottom: #ffffff 3px solid;
}

header a {
  color: #505050;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 25px;
}

header ul {
  margin: 0;
  padding: 0;
}

header li {
  display: inline;
  padding: 0 20px 0 20px;
}

header #branding {
  display: block-inline;
  margin-left: auto;
  margin-right: auto;
  width: 39%;
}

header #branding h1 {
  margin: 0;
}

header nav {
  text-align: center;
  width: 100%;
  background-color: #D3D3D3;
  overflow: hidden;
}

header a:hover {
  color: #cccccc;
  font-weight: bold;
}

.SOCIAL-MEDIA ul {
  float: right;
  position: relative;
  top: -70px;
}

header #number {
  float: left;
  position: relative;
  /* Declared position allows for location changes */
  top: -70px;
  margin-left: 60px;
}

<header>
  <div class="container">
    <div id="branding">
      <img src="./img/logo.jpg" alt="LOGO" style="width:400px;height:100px;">
    </div>
    <div class="SOCIAL-MEDIA">
      <ul>
        <li>
          <a href="https://www.instagram.com/blossoming_events/?hl=en"> <img src="./img/insta.png" alt="instagram" style="width:50px;height:50px;"> </a>
        </li>
        <li>
          <a href="https://www.instagram.com/blossoming_events/?hl=en"> <img src="./img/twitter.png" alt="twitter" style="width:50px;height:50px;"> </a>
        </li>
        <li>
          <a href="https://www.instagram.com/blossoming_events/?hl=en"> <img src="./img/facebook.png" alt="facebook" style="width:50px;height:50px;">
          </a>
        </li>
      </ul>
    </div>
    <nav>
      <ul>
        <li class="current"><a href="index.html">Home</a></li>
        <li><a href="aboutme.html">About Me</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="Contact us.html">Contact us</a></li>
      </ul>
    </nav>
  </div>
</header>