浮动社交图标附加到内容

Question

我试图在我的wordpress网站上添加浮动社交图标（使用wp bootstrap starter主题）。我使用以下css：

        var fields = this._commonProperties._propertyEditors._fields;

        for (var i = 0; i < fields.length; i++) {

          if(_logic_){  //Like (fields[i].get('name') == (prefix+"_MainFileCategory"));
            fields[i].readOnly = true;
            fields[i].textbox.readOnly = true;
          }
        }

和（end of）header.php

.social{  
padding: 0;
margin: 0;
position: fixed;
right: -130px;
top:13rem;
width:210px;
z-index: 99;  
}

.menu-social-container .social li{
list-style-type: none;
color: #fff;
height: 43px;
padding: 0;
margin: 0 0 1px 0;
}

.menu-social-container .social li a{
display: block;
max-width: 40px;
padding: 10px;
}

来自Firefox：

</header><!-- #masthead -->
<div id="content" class="site-content">

    <div class="container">
       <?php wp_nav_menu( array( 'theme_location' => 'social', 'menu_class' => 'social' ) ); ?>
        <div class="row">
            <?php endif; ?>

</header><!-- #masthead -->
<div id="content" class="site-content">

一切正常，但我想将图标附加到内容区域（就在它旁边）而不是浏览器的最右侧。因为根据浏览器/设备大小，图标距离内容数英里，并且不明显或在内容正上方。

我感谢任何帮助。