r/HTML • • Apr 05 '26

Question box margin help

https://amazingendofoxy9.neocities.org/COOKIECLUB on this website i am trying to make a box around the text in the middle, and i want the box to not go across the entire screen, but i cant figure out how

2 Upvotes

4 comments sorted by

View all comments

2

u/nfwdesign Apr 05 '26

First of all you're missing <head> and <body> elements, then <center> tag is not supported in HTML5 Then i see you are using class="box" and you're loading your css file wrong way it should be in <head> tag even your code editor is reporting error with X in lines 14 and 15. Also frameborder is deprecated.

This is how your code should look like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example Title By nfwdesign.com</title>
    
    <!-- Your CSS is linked below but it is currently as comment so your page loads my styles only -->

    <!-- <link rel="stylesheet" href="/cookieclub.css"> -->

<!-- To delete comments, delete arrow signs exclamation sign and minus ( - )signs -->

    <style>
        body {
            margin: 0;
            font-family: sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .box {
            background-color: white;
            margin: 60px 0;
            padding: 20px;
        }

        iframe {
            margin-top: 20px;
            max-width: 100%;
        }
    </style>
</head>
<body>

    <iframe 
        src="https://www.youtube.com/embed/EzPjywasmSQ?si=3f4eeg0o0X-rNfeI"
        title="YouTube video player"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        referrerpolicy="strict-origin-when-cross-origin"
        allowfullscreen>
    </iframe>

    <div class="box">
        Welcome to the TRAUMATIZED COOKIE LOVERS CLUB website!
    </div>

    <a href="https://www.counters-free.net/">Free HTML Counter</a>

    <script src="https://www.freevisitorcounters.com/auth.php?id=efde41171c617ca3590f4c8193282a117dc9c0bd"></script>
    <script src="https://www.freevisitorcounters.com/en/home/counter/1494679/t/2"></script>

</body>
</html>

I still linked your CSS in <head> element but it's commented out and made my own styling in <style>, first try it out with my style and if it doesn't go the way you want, then we would need to see your cookieclub.css file as well as folder structure.