I am stuck with div

Hello @everyone!

I’d like to make the div see along the row. Can you help me pls?

Here’s the code:

<!DOCTYPE html>
<html lang="auto">
    <head>
        <meta charset="UTF-8">
        <meta  name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Dr. Oetker - Cremă pentru prăjituri</title>
    </head>
    <body> 
        <section name="top-line">
            <!--How can I set the div so it will see at all the page ?-->
            <div class="first red"></div>
            <div class="white"></div>
            <div class="blue"></div>
            <div class="white"></div>
            <div class="red"></div>
        </section>
        <section name="mod_de_preparare">
            <p class="red-p">Gata în 4 minute !</p>
            <p class="smaller-p blue-p">Mod de preparare:</p>
            <img src="milk.jpg"><img src="cream.jpg"><img src="finnaly.jpg">
        </section>
    </body>
</html>

<style>
    .blue-p {
        color: blue;
    }
    .red-p {
        color: red;
    }
    .smaller-p {
        font-size: 11px;

    }
    .first {
        margin-top: 30px;
    }
    .red{
        background: red;
        height: 5px;
        width: 100%;
        border: 0;
    }
    .white {
        background: white;
        height: 5px;
        width: 100%;
        border: 0;
    }
    .blue {
        background: blue;
        height: 3px;
        width: 100%;
        border: 0;
    }
    html {
        background: linear-gradient(-45deg, rgb(228, 104, 32), rgb(241, 232, 92), rgb(228, 104, 32), rgb(241, 232, 92), rgb(228, 104, 32), rgb(241, 232, 92), rgb(228, 104, 32));
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
    }
    body {
        height: 100%;
    }
</style>

And here’s the link (codepen):

I forgot to say that I tried hr too…

Research what a universal selector is and use it to reset the margin and padding.

1 Like

Thank you! It really work.

I have 1 more question:

How can I make the body stay in the middle of the page?

Updated code
<!DOCTYPE html>
<html lang="auto">
    <head>
        <meta charset="UTF-8">
        <meta  name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Dr. Oetker - Cremă pentru prăjituri</title>
    </head>
    <body> 
        <section name="top-line">
            <div class="first red"></div>
            <div class="white"></div>
            <div class="blue"></div>
            <div class="white"></div>
            <div class="red"></div>
            <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Dr._Oetker-Logo.svg/2560px-Dr._Oetker-Logo.svg.png">
        </section>
        <section name="mod_de_preparare">
            <p class="red-p">Gata în 4 minute !</p>
            <p class="smaller-p blue-p">Mod de preparare:</p>
            <img src="milk.jpg"><img src="cream.jpg"><img src="finnaly.jpg">
        </section>
    </body>
</html>

<style>
    * {
        
        margin: 0;
        padding: 0;
    }
    .img {
        position: relative;
        bottom: 12px;
        left: 14px;
        width: 70px;
    }
    .blue-p {
        color: blue;
    }
    .red-p {
        color: red;
    }
    .smaller-p {
        font-size: 11px;

    }
    .first {
        margin-top: 30px;
    }
    .red{
        background: red;
        height: 5px;
        width: 100%;
        border: 0;
    }
    .white {
        background: white;
        height: 5px;
        width: 100%;
        border: 0;
    }
    .blue {
        background: blue;
        height: 3px;
        width: 100%;
        border: 0;
    }
    html {
        background: linear-gradient(-45deg, rgb(228, 104, 32), rgb(241, 232, 92), rgb(228, 104, 32), rgb(241, 232, 92), rgb(228, 104, 32), rgb(241, 232, 92), rgb(228, 104, 32));
        background-repeat: no-repeat;
        max-width: 450px;
        width: 400px;
        height: 100%;
    }
    body {
        display: block;
        height: auto;
    }
</style>

I mean with the same background, the same height, width…

Updated Link

https://codepen.io/codeposter/full/ExbXqBO

I’m not sure I understand what you are asking. Everything the browser renders is in the body tags so what do you mean by “make the body stay in the middle of the page”?

On a side note, in codepen there are editors for HTML, CSS and JS.
Code for HTML goes in the HTML editor
Code for CSS goes in the CSS editor
Code for JS (when you get there) goes in the JS editor

Also, Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
You have elements out of order. Review this for an understanding of the HTML boilerplate tags.

I mean you see that the background, images, the text are on the left part of the page… I want it to be in the center of it…

Yes, but I copied code from VScode… Whatever, I will change it, thank you!

There is nothing in your CSS, not a single selector that centers anything so it’s doing exactly what you’re telling it to do

Okay, copy and paste appropriately.
I don’t know that you’re copying from VSC, which is why is said “on a side note”.
Even with VSC, having style tags outside of the html tags and not within head tags is an issue.