As question, how can I insert small icon at the right side of the same block of background url that's is center on the page and without messing up the position of the logo (background url)? I want the logo to stay on the middle and the icon of social media at the right side of the page.

```css
.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;
    }
```

```html
  <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>
```