html - Changing bootstrap grid margins -

i'm begginer coder , i'm learning use bootstrap grid. although, didn't quite understand how container margins work.

i wrote piece of coding website footer , tried using bootstrap grid, wanted social icons 20px right , can't it. inspecting element @ google chrome can see there margin right can't seem customize , make smaller.

take - footer's html code:

    <footer>         <div class="row container">             <div class="logo-rodape col-md-2">                 <img src="img/logo-principal-white-gota.png" alt="logo picada zero">             </div>              <div class="r-content col-md-4">                 <p class="slogan-title">clean , protection</p>                 <p class="slogan-sub">proteção e limpeza para sua família</p>             </div>              <div class="r-social col-md-5">                 <a href="www.facebook.com"><i class="fa fa-facebook fa-2x" aria-hidden="true" style="color:#fff"></i></a>                  <a href="www.vimeo.com"><i class="fa fa-vimeo fa-2x" aria-hidden="true" style="color:#fff"></i></a>             </div>         </div>      </footer> 

now, css code:

footer{ background: url(../img/rodape-background.png); clear: both; padding: 50px 0; }  footer .container{ position: relative; margin-left: 80px; box-sizing: border-box; margin-top: 50px; }  .logo-rodape { padding: 0; margin: 0 auto; box-sizing: border-box; display: inline-block;  }  .r-content { padding: 0; box-sizing: border-box; display: inline-block; text-align: left; margin-left: 30px; margin-top: 20px; }   .slogan-title { font-family: "avenir next condensed"; font-size: 0.3em; font-size: calc(0.3em + 1vw);  @include screen-above(800px) {     font-size: 0.4em; } font-weight: 600; letter-spacing: 1.5px; margin-bottom: -2px; color: #fff;  }  .slogan-sub { font-family: 'lato', sans-serif; font-size: 0.2em; font-size: calc(0.2em + 1vw);  @include screen-above(800px) {     font-size: 0.3em; } font-weight: 300; letter-spacing: 1px; color: #fff; }  .r-social { text-align: right; box-sizing: border-box; display: inline-block; margin-top: 40px; margin-left: 60px; }  .fa-facebook { padding-right: 20px; }  i.fa:hover { color: #57cdf7; !important; } 

i'll glad suggestions, tried out know far , couldn't right.

thanks!

i'm assuming question means want social icons sit on far right of screen, not in confines of grid bootstrap sets.

you messing bootstrap grid re-define .container did, , there issues go along (as saw).

the best bet create entirely separate component can move wherever want, independent of bootstrap grid.

html

<div class="social-icons">   <ul>     <li>social icon</li>     <li>another icon</li>   </ul> </div> 

css

.social-icons {   position: fixed;   bottom: -10px;   right: -5px; }  ul {   list-style: none; }  .social-icons li {   display: inline;   padding-right: 30px;   padding-bottom: 20px;   width: 100px; } 

codepen

this in particular glues social icons bottom of page regardless of scrolling. gives idea of do.