Div elements not being displayed where expected-CodePudding

I'm using HTML CSS and want to display a simple page with a title, a number and another smaller title, and have it all contain a light purple-pink background. However, although I've placed all the elements in the same div, the background doesn't completely cover them. I'm defenitely making a really really dumb error but I can't figure out what. Here's the code:

   .navbar {
    border: 0px solid rgb(255, 101, 229);
    /*background-color: rgba(255, 255, 255, 0.527);*/
    background: linear-gradient(-45deg, #f57be1, #e2d171, rgb(150, 221, 109), rgb(0, 195, 255), rgb(211, 11, 211));
    position: relative;
    height: 100px;
    width: 1890px;
    position: sticky;
    top: 0;
    z-index: 100;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    align-content: center;
    }

    .topten {
        position: relative;
        left: 0px;
        right: 0px;
        text-align: center;
        padding: 30px;
        /*border: 3px solid rgb(214, 74, 151);*/
        margin: 20px;
        background: rgba(246, 47, 213, 0.719);

    }

    #title {
        color: rgb(248, 244, 239);
        font-family: "Roboto", sans-serif;
        font-weight: bold;
        font-size: 50px;
    }

    #one {
        text-align: left;
        top:300px;
        right:0;
        bottom:0;
        left:100px;
        display: block;  
    }

    #hollowknight {
        display: flex;
        margin-left: 50px ;
        margin-top: -75px;  
        margin-bottom: 100px;  
        text-align: left;
        font-family: "Roboto", sans-serif;
        font-size: 25px;
        color: rgb(127, 255, 249);
        top: 285px;
        left: 150px;
    }

   
    <div >
        <h2 id="title">Top 10 Games That I Love</h2>

        <div id="one"><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
        width="50" height="50"
        viewBox="0 0 226 226"
        style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,226v-226h226v226z" fill="none"></path><g fill="#1abc9c"><path d="M162.72,9.04h-42.38856c-0.84524,0 -1.66788,0.23504 -2.38204,0.678l-57.05144,35.42324c-1.32888,0.82264 -2.13796,2.27808 -2.13796,3.83748v34.37008c0,1.64076 0.89044,3.15044 2.32328,3.95048c1.42832,0.80004 3.18208,0.75484 4.57876,-0.10396l56.37796,-34.95768v160.20236c0,2.49504 2.02496,4.52 4.52,4.52h36.16c2.49504,0 4.52,-2.02496 4.52,-4.52v-198.88c0,-2.49504 -2.02496,-4.52 -4.52,-4.52z"></path></g></g></svg></div>
    
        <div id="hollowknight"><h2>Hollow Knight</h2>
    </div>

EDIT: I put #hollowknight and #one each in an individual <div> inside the main <div> aka topten, and also added some margin to them in the CSS, but it's all via trial and error and I don't know if my approach is a good one at all...

CodePudding user response：

Another solution is to use margin to adjust the position since css is a layout language.

This will prevent element from getting out the coordinates.

Then you could use height:max-content to make the parent div include all child element

.navbar {
    border: 0px solid rgb(255, 101, 229);
    /*background-color: rgba(255, 255, 255, 0.527);*/
    background: linear-gradient(-45deg, #f57be1, #e2d171, rgb(150, 221, 109), rgb(0, 195, 255), rgb(211, 11, 211));
    position: relative;
    height: 100px;
    width: 1890px;
    position: sticky;
    top: 0;
    z-index: 100;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    align-content: center;
    }

    .topten {
        position: relative;
        left: 0px;
        right: 0px;
        text-align: center;
        padding: 30px;
        /*border: 3px solid rgb(214, 74, 151);*/
        margin: 20px;
        background: rgba(246, 47, 213, 0.719);

    }

    #title {
        color: rgb(248, 244, 239);
        font-family: "Roboto", sans-serif;
        font-weight: bold;
        font-size: 50px;
    }

    #one {
        text-align: left;
        top:300px;
        right:0;
        bottom:0;
        left:100px;
        display: block;  
    }

    #hollowknight {   
        text-align: left;
        font-family: "Roboto", sans-serif;
        height:max-content;
        font-size: 25px;
        color: rgb(127, 255, 249);
        margin-top: -75px;
        margin-left: 100px;
    }

<div >
        <h2 id="title">Top 10 Games That I Love</h2>

        <div id="one"><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
        width="50" height="50"
        viewBox="0 0 226 226"
        style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,226v-226h226v226z" fill="none"></path><g fill="#1abc9c"><path d="M162.72,9.04h-42.38856c-0.84524,0 -1.66788,0.23504 -2.38204,0.678l-57.05144,35.42324c-1.32888,0.82264 -2.13796,2.27808 -2.13796,3.83748v34.37008c0,1.64076 0.89044,3.15044 2.32328,3.95048c1.42832,0.80004 3.18208,0.75484 4.57876,-0.10396l56.37796,-34.95768v160.20236c0,2.49504 2.02496,4.52 4.52,4.52h36.16c2.49504,0 4.52,-2.02496 4.52,-4.52v-198.88c0,-2.49504 -2.02496,-4.52 -4.52,-4.52z"></path></g></g></svg></div>
    
        <div id="hollowknight"><h2>Hollow Knight</h2>
    </div>