Fix badge alignment in footer navigation

Author: Priya5

app/assets/stylesheets/badges.sass

@@ -91,6 +91,7 @@
   .mini-badges-section
     position: relative
     margin: 27px 4px 0 0
+    float: right
     .account-badge
       margin: 0 20px 31px 0
       height: 48px
@@ -102,6 +103,7 @@
     .mini-badges-section
       margin: 0 0 15px
       display: flex
+      float: none
       .account-badge
         margin: 0 20px 20px 0
 

app/views/accounts/_mini_header.html.haml

@@ -1,14 +1,14 @@
 - lang = @account.most_experienced_language
 .account_header{ style: 'margin-top: 5px' }
-  .col-xs-4.col-sm-2.col-md-2#account_icon
+  .col-xs-4.col-sm-3.col-md-2#account_icon
     = link_to account_path(@account) do
       = image_tag avatar_img_path(@account, 62), size: '128x128', itemprop: 'image'
     - if lang
       - bg_color = language_color(lang.name)
       - text_color = language_text_color(lang.name)
       = link_to '', '#', style: "background-color: ##{bg_color}; color: ##{text_color};",
       title: t('accounts.mini_header.title'), class: 'center primary_language_bg'
-  .col-xs-8.col-sm-10.col-md-10#account_header
+  .col-xs-7.col-sm-4.col-md-7#account_header
     .info.pull-left
       %h1{ itemprop: 'name' }
         = link_to h(@account.name), account_path(@account)
@@ -28,7 +28,8 @@
               = truncate(@account.url, length: 60)
       .clearfix
       %meta{ itemprop: 'interactionCount', content: @account.kudo_rank }
-    .mini-badges-section.pull-right
+  .col-xs-12.col-sm-5.col-md-3
+    .mini-badges-section
       - badges = @account.badges.map { |badge| BadgeDecorator.new(badge) }
       = render partial: 'accounts/badges_row', locals: { badges: badges }
 

app/views/accounts/show/_header.html.haml

@@ -38,9 +38,10 @@
             rel: 'popup', title: "Follow @#{@account.twitter_account}" do
               %i.icon-twitter
           = render partial: 'accounts/show/header/kudo_button', locals: { css: 'btn-mini btn-info' }
-  .col-xs-12.col-sm-5.col-md-3.mini-badges-section
-    - badges = @account.badges.map { |badge| BadgeDecorator.new(badge) }
-    = render partial: 'badges_row', locals: { badges: badges }
+  .col-xs-12.col-sm-5.col-md-3
+    .mini-badges-section
+      - badges = @account.badges.map { |badge| BadgeDecorator.new(badge) }
+      = render partial: 'badges_row', locals: { badges: badges }
 
 .clearfix  
 .col-xs-12.col-sm-12.col-md-12