Gap between header and top of the page

Question

I'm a beginner in html and css and I have a problem with the gap between the header and the top of the page. I've tried a lot of solutions and googled a lot for possible solutions but nothing has worked for me. The code might be a bit messy because of attempts to fix the problem and not properly cleaning them up.

This is my html code:

    * {
        font-family: "Roboto Thin", monospace;
        font-weight: 200;
        color: black;
    }
        
    a {
        color: dodgerblue;
    }
        
    #previewanchor {
        color: black;
        text-decoration: none;
    }
        
    .preview {
        text-align: left;
    }
        
    .index {
        text-align: center;
    }
        
    .about {
        text-align: center;
    }
        
    h1, h2, h3 {
        font-weight: bold !important;
    }
        
    .box {
        background-color: rgb(255, 255, 82);
        width: auto;
        height: auto;
        padding-top: 12px;
        padding-bottom: 0px;
        margin: 0px;
        border: 0px;
    }
        
    #previewTitle {
        margin-top: 0px;
    }

    <!DOCTYPE html>
    <html class="preview">
        <head>
            <div class="title">
                <!-- Set the title of the page -->
                <title>Preview</title>
    
                <!-- Create a link to the CSS file -->
                <link rel="stylesheet" href="style.css">
            </div>
        </head>
    
        <body>
            <header>
                <div class="container">
                    <div class="box">
                        <h1 id="previewTitle">Rate Beautiful Pictures</h1>
                    </div>
                </div>
            </header>
    
            <section>
                <p>
                    <strong>Hi there!</strong> This is just a preview page to tell you a little about 
                    what you're going to do. You're going to rate some of the most beautiful pictures 
                    I could find on the web. <strong>Are you ready?</strong>
                </p>
            </section>
    
            <!-- Whitespace -->
            <br>
    
            <!-- Create a horizontal line -->
            <hr>
    
            <header id="previewlist">
                <!-- Create a title for the list -->
                <h2>Contents</h2>
                
                <nav>
                    <!-- Create a summary of the page -->
                    <ul>
                        <!-- Create a list of all the pictures -->
                        <li><h3>The Pictures</h3>
                            <ol>
                                <li><a href="C:\Users\biere\Downloads\johannes-plenio-DKix6Un55mw-unsplash.jpg">
                                    Picture one by Johannes Plenio</a></li>
                                <li><a href="C:\Users\biere\Downloads\andy-holmes-LUpDjlJv4_c-unsplash.jpg">
                                    Picture two by Andy Holmes</a></li>
                                <li><a href="C:\Users\biere\Downloads\kazuend-2KXEb_8G5vo-unsplash.jpg">
                                    Picture three by Kazuend</a></li>
                                <li><a href="C:\Users\biere\Downloads\kristopher-roller-zepnJQycr4U-unsplash.jpg">
                                    Picture four by Kristopher Roller</a></li>
                            </ol>
                        </li>
    
                        <!-- Whitespace -->
                        <br>
    
                        <!-- Create a link to the bottom of the website -->
                        <li><a href="./about.html">Other</a></li>
                    </ul>
                </nav>
            </header>
    
            <!-- Whitespace -->
            <br>
    
            <!-- Create a horizontal line -->
            <hr>
    
            <!-- Whitespace -->
            <br>
    
            <button type="button"><a href="./index.html" id="previewanchor">
                Click this button to start</a></button>
        </body>
    </html>

Gap between header and top of the page

0 Answers0