How can I insert a small icon in the direction of the background logo without messing up all the content?

Question

As a question, how can I insert a small icon on the right side of the same block of the background URL that is on the page and not interfere with the position of the logo (background url)? I want the logo to remain in the middle and the social networks icon on the right side of the page.

.logo{
        display: block;
        text-indent: -10000px;
        background: url("http://i.imgur.com/No5YAp7.jpg") no-repeat center center;
        background-size: 200px;
        width: 200px;
        height: 80px;
        margin: 30px auto;
    }

    #social{
        float: right;
    }

    #social ul{
        list-style: none;
    }

    #social ul li{
        display: inline-block;
        text-indent: -10000px;
        margin-top: 40px;
    }

    .facebook{
        display: block;
        background: url("http://i.imgur.com/y6Y9QIs.png") no-repeat center;
        background-size: 40%;
        width: 60px;
        height: 60px;
    }

    .instagram{
        display: block;
        text-indent: -10000px;
        background: url("http://i.imgur.com/aaDQFZ6.png") no-repeat center;
        background-size: 50%;
        width: 60px;
        height: 60px;
        margin-right: 30px;
    }

  <h1 class="logo">abc</h1>
            
    <div id="social">
    <ul>
    <li><a href="" title="facebook" class="facebook">Facebook</a></li>
    <li><a href="" title="instagram" class="instagram">Instagram</a></li>
    </ul>
    </div>

Run codeHide result

Answer 1

Just reorder your HTML so that social is first.

.logo{
        display: block;
        text-indent: -10000px;
        background: url("http://i.imgur.com/No5YAp7.jpg") no-repeat center center;
        background-size: 200px;
        width: 200px;
        height: 80px;
        margin: 30px auto;
    }

    #social{
        float: right;
    }

    #social ul{
        list-style: none;
    }

    #social ul li{
        display: inline-block;
        text-indent: -10000px;
        margin-top: 40px;
    }

    .facebook{
        display: block;
        background: url("http://i.imgur.com/y6Y9QIs.png") no-repeat center;
        background-size: 40%;
        width: 60px;
        height: 60px;
    }

    .instagram{
        display: block;
        text-indent: -10000px;
        background: url("http://i.imgur.com/aaDQFZ6.png") no-repeat center;
        background-size: 50%;
        width: 60px;
        height: 60px;
        margin-right: 30px;
    }

<div id="social">
  <ul>
    <li><a href="" title="facebook" class="facebook">Facebook</a></li>
    <li><a href="" title="instagram" class="instagram">Instagram</a></li>
  </ul>
</div>
<h1 class="logo">abc</h1>

Run codeHide result

Answer 2

Very simple solution - use position: absoluteyour item #social, and then put it to your liking, using top, right,margin` etc.

.logo{
        display: block;
        text-indent: -10000px;
        background: url("http://i.imgur.com/No5YAp7.jpg") no-repeat center center;
        background-size: 200px;
        width: 200px;
        height: 80px;
        margin: 30px auto;
    }

    #social{
        position: absolute;
        right: 0;
        top: 0;
    }

    #social ul{
        list-style: none;
    }

    #social ul li{
        display: inline-block;
        text-indent: -10000px;
        margin-top: 40px;
    }

    .facebook{
        display: block;
        background: url("http://i.imgur.com/y6Y9QIs.png") no-repeat center;
        background-size: 40%;
        width: 60px;
        height: 60px;
    }

    .instagram{
        display: block;
        text-indent: -10000px;
        background: url("http://i.imgur.com/aaDQFZ6.png") no-repeat center;
        background-size: 50%;
        width: 60px;
        height: 60px;
        margin-right: 30px;
    }

  <h1 class="logo">abc</h1>
            
    <div id="social">
    <ul>
    <li><a href="" title="facebook" class="facebook">Facebook</a></li>
    <li><a href="" title="instagram" class="instagram">Instagram</a></li>
    </ul>
    </div>

Run codeHide result

Answer 3

#social {
    position: absolute;
    right: 20px;
    top: -20px;
}

#social {
    float: right;
}

:

.logo {
  display: block;
  text-indent: -10000px;
  background: url("http://i.imgur.com/No5YAp7.jpg") no-repeat center center;
  background-size: 200px;
  width: 200px;
  height: 80px;
  margin: 30px auto;
}
#social {
  position: absolute;
  right: 15px;
  top: -15px;
}
#social ul {
  list-style: none;
}
#social ul li {
  display: inline-block;
  text-indent: -10000px;
  margin-top: 40px;
}
.facebook {
  display: block;
  background: url("http://i.imgur.com/y6Y9QIs.png") no-repeat center;
  background-size: 40%;
  width: 60px;
  height: 60px;
}
.instagram {
  display: block;
  text-indent: -10000px;
  background: url("http://i.imgur.com/aaDQFZ6.png") no-repeat center;
  background-size: 50%;
  width: 60px;
  height: 60px;
  margin-right: 30px;
}

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

<div id="social">
  <ul>
    <li><a href="" title="facebook" class="facebook">Facebook</a>
    </li>
    <li><a href="" title="instagram" class="instagram">Instagram</a>
    </li>
  </ul>
</div>

Hide result

.logo, social { width: 240px; margin: 0 auto; }

	.header { max-width: 1260px; margin: 0 auto; }

	.social {
    position: absolute;
    right: 5%;
    top: 20px;
	}

a.logo_holder {
    height: 80px;
    width: 200px;
    padding: 20px 20px;
    display: block;
    background-size: 80% !important;
    background: url(http://i.imgur.com/No5YAp7.jpg) no-repeat center center;
}

.social li {
    float: left;
    display: inline-block;
    list-style: none;
    vertical-align: middle;
    margin: 0 ;
    text-indent: -10000px;
}

.instagram {
    display: block;
    text-indent: -10000px;
    background: url(http://i.imgur.com/aaDQFZ6.png) no-repeat center;
    background-size: 50%;
    width: 60px;
    height: 60px;
}

.facebook {
    display: block;
    background: url(http://i.imgur.com/y6Y9QIs.png) no-repeat center;
    background-size: 40%;
    width: 60px;
    height: 60px;
}

<div class="header">
<div class="logo">
	<a class="logo_holder" href="#"></a>
</div>
<div class="social">
	<ul>
    <li><a href="" title="facebook" class="facebook">Facebook</a></li>
    <li><a href="" title="instagram" class="instagram">Instagram</a></li>
    </ul>
</div>
</div>

Hide result