Bootstrap inner spacing delete for responsive fluid - css

Question

I am trying to place social media icons total 6 floated right to right top most corner in my storefront word press.This container i am placing above the head section with bootstrap container.check image attached as the space between columns is too large.Any suggestions with or without bootstrap.
Tried below
<div class="container-fluid">
<div class="row no-gutter" >
<div class="col-md-6" style="background-color:#d9eaf2;color: #6666ccff;font-family: Roboto,Tahoma,Helvetica,sans-serif;font-size: 14px;margin-bottom: 6px;">
</div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-240" src="#iconfinder_facebook_circle_color_107175-e1547916268272.png" alt="" width="28" height="28" /></div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-247" src="#iconfinder_instagram_circle_color_107172-e1547916926464.png" alt="" width="28" height="28" /></div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-246" src="#iconfinder_youtube_circle_color_107167-e1547916948298.png" alt="" width="28" height="28" /></div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-245" src="#iconfinder_pintrest__social__media__icon_2986063-e1547916959860.png" alt="" width="28" height="28" /></div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-244" src="#iconfinder_google_circle_color_107180-e1547916968579.png" alt="" width="28" height="28" /></div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-242" src="#iconfinder_twitter_circle_color_107170-e1547916988283.png" alt="" width="28" height="28" /></div>
</div>
</div>
css
/* remove spacing between middle columns */
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
padding-right:0;
padding-left:0;
}
/* remove right padding from first column */
.row.no-gutter [class*='col-']:first-child {
padding-right:0;
}
/* remove left padding from first column */
.row.no-gutter [class*='col-']:last-child {
padding-left:0;
}
/* only for column content visible */
.col-md-1>div {background-color:#ddd;}
kindly check on code pen https://codepen.io/nhui77777777/pen/pqMOyZ
actual problem:

Answer 1

You can use the bootstrap align class align-middle to align it.
Like:
<div class="col-md-1 align-middle"><img class="aligncenter size-full wp-image-240" src="#iconfinder_facebook_circle_color_107175-e1547916268272.png" alt="" width="28" height="28" /></div>

Answer 2

The problem is that you added each image to their own column, and as the page grows, each column will have the same width much larger than the images.
You should put all images inside the same column and raise its size to col-md-6.
/* remove spacing between middle columns */
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
padding-right:0;
padding-left:0;
}
/* remove right padding from first column */
.row.no-gutter [class*='col-']:first-child {
padding-right:0;
}
/* remove left padding from first column */
.row.no-gutter [class*='col-']:last-child {
padding-left:0;
}
/* only for column content visible */
.col-md-1>div {background-color:#ddd;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row no-gutter" >
<div class="col-md-6" style="background-color:#d9eaf2;color: #6666ccff;font-family: Roboto,Tahoma,Helvetica,sans-serif;font-size: 14px;margin-bottom: 6px;">
</div>
<div class="col-md-6"><img class="aligncenter size-full wp-image-240" src="https://via.placeholder.com/28" alt="" width="28" height="28" />
<img class="aligncenter size-full wp-image-247" src="https://via.placeholder.com/28" alt="" width="28" height="28" />
<img class="aligncenter size-full wp-image-246" src="https://via.placeholder.com/28" alt="" width="28" height="28" />
<img class="aligncenter size-full wp-image-245" src="https://via.placeholder.com/28" alt="" width="28" height="28" />
<img class="aligncenter size-full wp-image-244" src="https://via.placeholder.com/28" alt="" width="28" height="28" />
<img class="aligncenter size-full wp-image-242" src="https://via.placeholder.com/28" alt="" width="28" height="28" /></div>
</div>
</div>