App content vertically centered, BUT WHY?

I’m working on a React application where I have a fixed header at the top of the page. Below the header, I have a content area that should start immediately after the header. However, the content appears to be vertically centered within the viewport, and I’m not sure why.

When resizing the browser window the content is displayed from the top, as it should.

So it kinda works but also not?

This is my relevant .js and .css:

.js:

import React, { useState, useEffect, useRef } from 'react';
import { Link } from 'react-router-dom';

const BrowseAll = () => {
    const [posts, setPosts] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const scrollContainerRef = useRef(null);

    useEffect(() => {
        fetchAllPosts();
    }, []);

    useEffect(() => {
        const updateBodyHeight = () => {
            if (scrollContainerRef.current) {
                scrollContainerRef.current.style.height = `${window.innerHeight}px`;
            }
        };

        window.addEventListener('resize', updateBodyHeight);
        updateBodyHeight();

        return () => {
            window.removeEventListener('resize', updateBodyHeight);
        };
    }, []);

<----- some more code here inbetween ----->

    return (
        <div className="browse-all" ref={scrollContainerRef}>
            <h1>All Posts</h1>
            {posts.map(post => (
                <div key={post._id} className="post bg-gray-800 text-white rounded-lg p-4 mb-4 w-full max-w-2xl">
                    <h2 className="text-2xl font-semibold">{post.title}</h2>
                    <p className="mb-2">{post.content}</p>
                    <p className="mb-2">Posted on: {new Date(post.created_at).toLocaleString()}</p>
                    <Link to={`/post/${post._id}`} className="mt-4 inline-block text-center bg-blue-500 text-white py-2 px-4 rounded">
                        View Post Details
                    </Link>
                </div>
            ))}
        </div>
    );
};

.css:

.browse-all {
    min-height: 100vh;
    margin-top: 60px;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.browse-all body {
    overflow: auto;
}

.browse-all h1 {
    text-align: center;
    margin-bottom: 20px;
}

.browse-all .post {
    background-color: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 20px;
    align-items: left;
    text-align: left;
}

.browse-all .post h2 {
    margin-top: 0;
}

.browse-all .comments {
    margin-top: 10px;
}

.browse-all .comment {
    background-color: #3a3a3a;
    border-radius: 5px;
    padding: 10px;
    margin-top: 10px;
}

I tried removing the scrollContainerRef, the useEffect hook that sets the height and playing around with the CSS. No luck.