I inspected it using Chrome, analyzed every associated div, and I still can't figure out why the two columns won't align next to each other when set to 50% width each?
My guess is that there might be some default margin or padding causing this issue. How can I override them if that's the problem?
CSS file
.stats-left {
display: inline-block;
border : 1px solid black;
width: 50%;
}
.stats-right {
vertical-align: top;
display: inline-block;
border : 1px solid black;
width: 50%;
}
.count-padding {
display: inline-block;
padding-top: .3em;
padding-bottom: .3em;
}
.blue-background {
background-color: #446CB3;
border : 1px solid black;
}
If I remove the 50% width from both:
I'm unable to eliminate the white gap between the two blue columns.
_count.html.erb
<% @user ||= current_user %>
<div class="stats-left">
<div class="blue-background">
<a href="<%= following_user_path(@user) %>">
<div class="count-padding">
<%= @user.following.count %>
Following
</div>
</a>
</div>
<div class="blue-background">
<a href="<%= following_user_path(@user) %>">
<div class="count-padding">
<%= @user.habits.count %>
Challenges
</div>
</a>
</div>
<div class="blue-background">
<a href="<%= following_user_path(@user) %>">
<div class="count-padding">
<%= @user.goals.unaccomplished.count %>
Current
</div>
</a>
</div>
<div class="blue-background">
<a href="<%= following_user_path(@user) %>">
<div class="count-padding">
<%= @user.quantifieds.count %>
Tracked
</div>
</a>
</div>
<div class="blue-background">
<a href="<%= following_user_path(@user) %>", id: white>
<div class="count-padding">
<%= @user.valuations.count %>
Values
</div>
</a>
</div>
</div>
<div class="stats-right">
<div class="blue-background">
<a href="<%= followers_user_path(@user) %>">
<div class="count-padding">
<%= @user.followers.count %>
Followers
</div>
</a>
</div>
<div class="blue-background">
<a href="<%= followers_user_path(@user) %>">
<div class="count-padding">
<%= @user.followers.count %>
Mastered
</div>
</a>
</div>
<div class="blue-background">
<a href="<%= followers_user_path(@user) %>">
<div class="count-padding">
<%= @user.goals.accomplished.count %>
Accomplished
</div>
</a>
</div>
<div class="blue-background">
<a href="<%= followers_user_path(@user) %>">
<div class="count-padding">
<%= @user.results.good.count %>
Good Results
</div>
</a>
</div>
</div>