I have temporarily unlisted this topic until the actual question can be clarified. It is much too vague so far.
Also it is looking like it may be more of a css question, not php.
On another point, is there any chance you could increase the contrast between the background and the white elements, I foresee many people srtuggling to see them properly.
Contrast increased + filed in correct category i.e. HTML-CSS. Can you please list it now.
The question is still not clear, but reading between the lines, is the problem that the second flex child in both containers has a margin, where the first doesn not?
I think I got the error after analyzing should we delete this question?
No just tell us the solution you found so others can benefit:)
Actually I set the margin on one inner div - That margin was creating issues.
I have couple of more issues in the same link. so I am posting in this same thread.
Issue #1 →
From where is this extra padding coming?
I have created borders in red color for the other users to understand the issue.
Secondly,
<p class="entry-meta">
<span class="entry-span"><span class="label">Written by</span>Monica Belluci</span>
<span class="entry-span"><span class="label">Updated on</span>Monica Belluci</span>
<span class="entry-span"><span class="label">Discussed by</span>4 comments</span>
</p>
I want the first entry-span on the leftmost - second in exact between - Third and last in the rightmost.
I am using this CSS, but could not accomplish this.
.entry-meta {display: flex; justify-content: space-around; border: 2px solid red;}
.entry-span {flex: 0 0 30%;}
.entry-span span { display: block;}
It’s the “space-around” value in the entry-meta rule you posted. 
I tried space-between also but the last item doesnt goes to the right extreme.
It will if you also remove the flex rule in the entry-span block. Then the space-between will work in full.
Can you educate me why there was such kind of behaviour?
Teaching is not my strong suite. 
The “entry-span” flex property was set 30% of its parent overriding the item sizing from the parent. Then the text-align on the spans made up the right gap as the content didn’t fill the width.
Hope I made it clearer.
Yes it does:) Give the element a green background and you will see it goes far to the right.
.entry-span {
flex: 0 0 30%;
background:green
}
The reason the text is not at the right then becomes obvious because the element itself is 30% wide. As Erik said if you don’t want 3 blocks of 30% then don’t set their basis to 30% and then they become content width only.
It’s a good idea when using flex to give a coloured background to each flex item so you can actually see what the element is doing.
<off-topic>
That can be helpful, and adding temporary borders will often not cause any problems. But I have found that sometimes the extra pixels do affect the layout. IMHO, when debugging layout issues, it would be better to style a property that can not affect any dimensions eg. background color, outline instead of border, etc.
</off-topic>
<off-topic>
The border shouldn’t be a problem @Mittineague as long as box-sizing is set:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}</off-topic>
<off-topic>
I usually favor dashed outlines pulled inside the edge of the box so adjacent outlines doesn’t overlap.
Transparent backgrounds is also very useful, they very clearly show overlapping areas.
Like:
.box{
outline: 1px dashed green;
outline-offset: -1px;
}
.box{
background: #f0f3;
}
</off-topic>