Why Is My Content Showing Outside The Div

why is my content showing outside the div?

You are floating .count so it doesn't influence it's parent container's height.

Set overflow: hidden on the parent (.commentbox) or use one of the other float containing techniques so that it does.

Content is coming out of div container not sure what to do

First of all you need to only insert the content from inside the <body> in codepen HTML section.

Your issue occurs because you set height: 70vh to .hero.
So no matter how the content inside .hero is big relative to the viewport height (vh) .hero is always 70% height of its height.

To fix this issue you may want to set height: auto for example.

How to prevent the element go outside the div

you need to add a min-width to your image. flex needs this for whatever reason, otherwise it will not downscale the elements. I come across this every time i use flex :D

.img-child {
    min-width: 0;
    width: 100%;
    margin-right: 30px;
}

Text displaying outside a div

You can try this.

.left-block {
    display: flex;
    align-items: center;
    justify-content: center;
}

Why is text element going outside of div?

you have height 9%, that is why your link falls out, delete height:9%; in your css

Long text is outside of the div

Add overflow: auto; to your CSS for the div with overflowing content.

This property will automatically add a scroll bar only on necessary axes to help contain content within the boundaries of the div. So if you have too much vertical content, you get a vertical (y) scrollbar. If you have too much horizontal content, you get a horizontal (x) scrollbar.

Why Is My Content Showing Outside The Div