Span does not recognize a parent element - Overlapping - html

Question

First of all, thank you for taking your time answering my maybe stupid question. I have a problem with my span not wanting to stay where mummy told him to stay.
HTML
<section class="row" id="white_background">
<div class='col-lg-6 col-md-6 col-sm-6 col-xs-12'>
<article class="news_post">
<span class='news_head'>
<h4>BLA BLA BLA BLA BLA BLA BLA</h4>
<p><?php echo $NewsItem->getValueEncoded( "summary" ) ?></p>
<p><?php echo $NewsItem->getValueEncoded( "uploadDate" ) ?></p>
</span>
</article>
</div>
</section>
Sass
#white_background {
background: $light;
height:100%;
padding: 20px;
text-align: center;
#inlcude clearfix;
h2 {
text-align: center;
color: $purple;
}
}
.news_post {
#include article_back (
'../img/picture_2.png');
padding: 20px;
margin-top: 30px;
margin-bottom: 50px;
}
.news_head {
max-width: 330px;
background-color: $purple;
padding: 6px 12px;
display: block;
color: $white;
margin: auto 50px auto 0px;
transform: translateY(120px);
text-align: left;
font-size: 12px;
h4 {
font-family: $heading;
font-size:13px;
}
}
Now it does this:
http://imgur.com/a/HQ46N
So it seems like the span does not see the div as a boundary.. any ideas?^^
EDIT: Sorry for making a slight mess here.
What I want to achieve is make the article-span overflow the article in a controlled way. Meaning: If I manually resize the window, the span should not go outside of the parent article.
The problem is that the sections I used, do not render the movement of the span properly and that is why the sections overlaps, like shown here: http://imgur.com/a/fZyux (Note: the left item in the purple box overflows the light grey edges of the article. It should stay inside this grey box.
The dealbreaker now is, when i resize the window to smaller window sizes, the span starts to move down, but i expected it to move to the edge of it's parten article or div.
The span does not get recognize that it sits in a div and does not get restricted by its boundaries. Why is that the case? It's super hard to explain but I tried.
Take a look at the full mockup to get an idea. http://imgur.com/a/5ZQn9
I hope this makes it more clear what i want to achieve^^

Answer 1

Use display flex;.
article {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
}
article span {
width: 30px;
height: 30px;
border: 1px solid green;
}
<article>
<span></span>
</article>

Answer 2

The sections overlap because using:
transform: translateY(120px);
makes the element behave like it was:
position: relative;
top: 120px;
The element has moved on the screen, but the rest of the layout renders as if it was still in the original place. To push the borders you can add margin-bottom to your span.
.container {
background-color: yellow;
height: auto;
}
.element-transformed {
display: block;
width: 50%;
height: 100px;
background-color: red;
transform: translateY(70px);
}
.element-positioned {
display: block;
width: 50%;
height: 100px;
background-color: red;
position: relative;
top: 70px;
}
.make-some-space {
height: 100px;
}
.element-transformed-with-margin {
display: block;
width: 50%;
height: 100px;
background-color: red;
transform: translateY(70px);
margin-bottom: 70px;
}
<div class="container">
<span class="element-transformed">
<p>transform: translateY(70px);</p>
</span>
</div>
<div class="container">
<span class="element-positioned">
<p>position: relative; top: 70px;</p>
</span>
</div>
<div class="make-some-space"></div>
<div class="container">
<span class="element-transformed-with-margin">
<p>transform: translateY(70px); margin-bottom: 70px;</p>
</span>
</div>
<div class="container">
<span class="element-positioned">
<p>position: relative; top: 70px;</p>
</span>
</div>