Php – How can I fix a gap issue that appears on a website when viewed on a phone, it appears when I hold the slide the content sideways

here is it, when in phone view

* {
    font-family: inter, sans-serif;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-size: cover;
    background-position: center center;
    background: linear-gradient(135deg, #ff66a6,  #ff70fb, #9f2fed);
    color: white;
    background-attachment: fixed; 
}
.Announce-section {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 2rem 1rem;
    color: white;
    text-align: center;
}

/* Section-Specific Styling */
.Announce-section {
    background: url('announcement-design.png') no-repeat center center;
    background-size: cover;
    margin: 0; /* Remove any margin */
    padding: 20px; /* Add some padding for better spacing */
    min-height: 100vh; /* Ensure it takes full height */
    box-sizing: border-box;
}

.seccontainer {
    max-width: 1000px;
    width: 100%;
    background: rgba(255, 102, 166, 0.8); /* Same background color as .img-text */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); /* Same box shadow as .img-text */
    border-radius: 15px; /* Same border radius as .img-text */
    padding: 2rem;
    color: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

 <?php
    include_once("connect.php");

    function getAnnouncements() {
        global $conn;

        // Query to get announcements from the database
        $query = "SELECT * FROM announcements"; 
        $result = mysqli_query($conn, $query);

        $conn->close();

        // Check if there are any announcements
        if (mysqli_num_rows($result) > 0) {
            // Loop through the announcements and output the HTML
            while ($announcement = mysqli_fetch_assoc($result)) {
                echo '<div class="card hidden">';
                
                if (!empty($announcement["filename"])) {
                    echo '<img class ="image" src="uploads/' . htmlspecialchars($announcement["filename"]) . '">'; 
                } else { 
                    echo '<img class ="image" style="display:none;">';
                }
                echo '<div class="content">';
                echo '<h2 class="title">' . htmlspecialchars($announcement["title"]) . '</h2>';
                echo '<p class="desc">' . htmlspecialchars($announcement["description"]) . '</p>';
                if (!empty($announcement["link"])) {
                    echo '<button class="action"><a href="' . htmlspecialchars($announcement["link"]) . '" target="_blank">Learn More</a></button>';
                }

    <!-- Announcement Section -->
    <section id="section1" class="Announce-section">
        <div class="seccontainer">
            <h1>ANNOUNCEMENTS</h1>
            <p>Important information and updates.</p>
            <div id="announcementList">
                <?php
                    // Call the function to display the announcements
                    getAnnouncements();
                ?>
            </div>
        </div>
    </section>

How can I fix a persistent gap or overlapping container issue on a website when viewed on a phone? I’ve already tried setting padding and margin to 0, but no matter what adjustments I make, the gap still remains. I even attempted commenting out the announcement section entirely to see if it was causing the issue, but the gap continues to appear. I’d like to completely remove this gap or overlapping container.