<section >
        <h2>Blog</h2>
            <div >
                <div >
                    <div >
                        <div >
                            <div >
                                <img src="./assets/image-2.jpg" />
                                <div >
                                    <p>Date</p>
                                    <h3>Blog</h3>
                                        <p>Lorem ipsum dolor.</p>
                                            <button >Read More</button>
                            </div>
                        </div>
                        <div >
                            <img src="./assets/image-3.jpg" />
                                <div >
                                    <p>Date</p>
                                    <h3>Blog</h3>
                                        <p>Lorem ipsum dolor.</p>
                                            <button >Read More</button>
                            </div>
                        </div>
                    </div>
                    <div >
                        <img src="./assets/image-5.jpg" />
                            <div >
                                <p>Date</p>
                                <h3>Blog</h3>
                                    <p>Lorem ipsum</p>
                                        <button >Read More</button>
                            </div>
                    </div>
            </div>
                <div >
                    <img src="./assets/image-4.jpg" />
                    <div >
                        <h3>About me</h3>
                            <p>Lorem ipsum</p>
                    </div>
                </div>
    </div>
</section>

And here is my CSS

.wrapper {
        width: 90%;
        display: flex;
        flex-direction: column;
    }


    .blog {       
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 100px;
    }


    h2 {
        text-align: center;
        line-height: 5rem;
        z-index:1;
    }

    header {
        margin-bottom: 50px;
    }
    
    .blog {
        margin-top: 250px;
    }


    .container {
        width: 100%;
        height: auto;
        margin-top: 165rem;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0;
    }

    .sub-container {
        margin: 0;
        height: auto;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        padding: 0;

    }

    .top-sub-container {
        margin: 0;
        padding: 0;
    }

    .box-box-1 > img {
        margin: 0;
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        
    }

    .box-text > p {
        width: 100%;
        font-size: 1.1rem;
    }

    .box-box-2 > img {
        margin-top: 0;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
    }

    .box-box-3 > img {
        margin-top: 0;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
    }

    .box-box-4 {
        display: flex;
        width: 100%;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
    }

    .box-box-4 > img {
        margin: 0;
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    
    }

I have tried adding margin and padding but it keeps disappearing behind the container. How do I move it up so that it sits write above the container instead of hiding behind it???

I have tried adding margin-top but it still will not work!

Edit: I've added more CSS but StackOverflow is saying that I need to provide more details. The following is filler text so I can make this post: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CodePudding user response：

Add z-index to you CSS.

.container {
    width: 100%;
    height: auto;
    margin-top: 1.65rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
}

h2{
    z-index:1;
}

CodePudding user response：

It May Helps You

h2{
    margin: 40px 0px;
    text-align:center;
}


.container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
}
.sub-container{
    display:flex;
    justify-content: space-between;
    
}

<h2>Blog</h2>
<div >
    <div >
        <div >
            <div >
                <img src="https://via.placeholder.com/100" />
                <div >
                    <p>Date</p>
                    <h3>Blog Post</h3>
                    <p>Lorem ipsum</p>
                    <button >Read More</button>
                </div>
            </div>
            <div >
                <img src="https://via.placeholder.com/100" />
                <div >
                    <p>Date</p>
                    <h3>Blog Post</h3>
                    <p>Lorem ipsum.</p>
                    <button >Read More</button>
                </div>
            </div>
            <div >
                <img src="https://via.placeholder.com/100" />
                <div >
                    <p>Date</p>
                    <h3>Blog Post</h3>
                    <p>Lorem ipsum dolor sit </p>
                    <button >Read More</button>
                </div>
            </div>
        </div>
    </div>
</div>