The web page looks fine. However, when changing my browser window size, the content of the container is pushed up and down. Thus it either leaves a lot of container free space or just disappears (like it is under the next container).
But I would like it to always be inside the container with the same proportions.
Here is my code:
padding: 80px 50px 0px 70px;
<div class="third container-fluid">
<!-- Demo image for screen mockup, you can put an image here, some HTML, an animation, video, or anything else! -->
<img src="http://happybirthdaycakeimages.com/wp-content/uploads/2015/05/Yummy-Chocolate-Birthday-Cake.jpg" class="img-responsive first" alt="">
<img src="http://gypsea.com.au/wp-content/uploads/2015/07/freeship.png" class="img-responsive" alt="">
<button type="button" class="button btn-block">MENU</button>
<div class="second-block container-fluid">
See the best cake recipes.
Trusted recipes for chocolate cake,
white cake, banana cakes,
and carrot cakes with photos and
tips from home cooks.
<div class="col-md-6 second">
<div class="videoWrapper shadow">
<iframe width="560" height="315" src="https://www.youtube.com/embed/JM_Q7HR55DY" frameborder="0" allowfullscreen></iframe>
Ok, I think that the problem is with the fixed height for your
<div class="third container-fluid">, which has a height of 678px. To be more specific: as the columns move when you resize your window, the fixed height is becoming a problem because your container has less px than the combined height of your child elements - the col's.
Here is a JSFiddle where I have just commented out the fixed height