Icons not aligning properly on resizing screen

Question

I have these two icons that I have placed at the bottom right of my page with a fixed position.

It is working perfectly on larger screens but the icons move as the screen is resized.

HTML

<div class="general_social_icons">
    <nav class="social">
        <ul>
            <li class="w3_facebook"><a href="#">Facebook </a></li>
            <li class="w3_g_plus"><a href="#">Google+ </a></li>       
        </ul>
  </nav>
</div>

CSS:

.social {
  position: fixed;
  bottom: 0%;
  right:0%;
  width: 4%;
  z-index: 9999;
}

.social li a{
  font-size:.7em;
}

.social ul {
  padding: 0px;
}
.social ul li {
  display: block;
  margin: 5px;
  width: 310px;
  text-align: left;
  padding: 10px;
  -webkit-border-radius: 30px 0 30px 30px;
  -moz-border-radius: 30px 0 30px 30px;
  border-radius: 30px 0 30px 30px;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

.w3_facebook{
  background:#3b5998;
}

.w3_g_plus{
  background:#dd4b39;
}

.social ul li:hover {
  -webkit-transform: translate(-110px, 0);
  -moz-transform: translate(-110px, 0);
  -ms-transform: translate(-110px, 0);
  -o-transform: translate(-110px, 0);
  transform: translate(-130px, 0);
}
.social ul li a{
  color:#212121;
}
.social ul li:hover a {
  color: #fff;
  text-decoration: none;
}

Here is the fiddle: https://jsfiddle.net/746d9nyc/2/

How can I make sure that the icons stay at the same position at any screen size as they are on full screen.

Answer 1

This is happening because your .social container has a percentage width .

To solve it either:

• assign a fixed width

.social {

  width:27px;

}

• set a minimum width

.social {

  min-width:27px;

}

Answer 2

The problem is that you have the width on .social set as a percentage.

.social {
  position: fixed;
  bottom: 0%;
  right:0%;
  width: 150px; // or some fixed value
  z-index: 9999;
}

updated fiddle: https://jsfiddle.net/746d9nyc/3/