Unable to properly align the header and the contents

December 13, 2023

I am not familiar with the html and css. I have a header which the contents at down but their alignment is is not correct and I am unable to properly. For eg: PLAY and Play on Spotify are on different side. I need correct content at heading correctly. I uses body_content .title span:nth-child() with width for the title and .body_content .list span:nth-child for the content

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Top Songs Spotify</title>
        <style>
            body{
                background-color: #0f0f1b;
                font-family: 'Source Sans Pro', sans-serif;
                font-weight: normal;
                color: #fff;
                min-height: 1000px;
                letter-spacing: .6px;
            }
            .container{
                width: 100%;
                max-width: 1140px;
                margin: 0 auto;
            }
            header{
                text-align: center;
            }
            header h1{
                font-size: 30px;
                font-weight: 400;
                margin-bottom: 0;
            }
            header h3{
                font-size: 20px;
                font-weight: 400;
                margin-bottom: 0;
            }
           .body_content{
                margin-top: 30px;
           }
           .body_content .title{
                background: #414072;
                color: #fff;
                padding: 20px 5px;
                border-radius: 10px;
                display: flex;
           }
           .body_content .title span{
                font-size: 15px;
           }
           .body_content .title span:nth-child(1)
           {
                width: 60%;
           }
           .body_content .title span:nth-child(2){
                width: 40%;
           }
           .body_content .title span:nth-child(3){
                width: 20%;
           }
           .body_content .list{
                position: relative;
                padding: 15px 5px;
                background: #000;
                border: 1px solid transparent;
                border-radius: 10px;
                margin-top: 25px;
                display: flex;
                align-items: center;
           }
           .body_content .list span{
                font-size: 15px;
    
           }
           .body_content .list span:nth-child(1){
                   width: 50%;
           }
           .body_content .list span:nth-child(2){
                   width: 40%;
           }
           .body_content .list span:nth-child(3){
                   width: 10%;
           }
    
        </style>
    </head>
    <body>
    <div class="wrapper">
        <div class="container">
            <header>
                <h1>TOP PICKED SPOTIFY SONGS</h1>
                <h3>Welcome User</h3>
            </header>
            <div class="body_content">
                <div class="title">
                    <span>TITLE</span>
                    <span>ARTIST</span>
                    <span>PLAY</span>
                </div>
                <div class="list">
                    <span>Song123</span>
                    <span>Artist 123</span>
                    <span>Play on Spotify</span>
                </div>
            </div>
        </div>
    </div>
    
    
    </body>
    </html>

Is there any solution to properly align the text for the html

>Solution :

i have adjusted some CSS property for solve your issue i hope helpful this:

.container{
                width: 100%;
                max-width: 1140px;
                margin: 0 auto;
            }
            header{
                text-align: center;
            }
            header h1{
                font-size: 30px;
                font-weight: 400;
                margin-bottom: 0;
            }
            header h3{
                font-size: 20px;
                font-weight: 400;
                margin-bottom: 0;
            }
           .body_content{
                margin-top: 30px;
           }
           .body_content .title{
                background: #414072;
                color: #fff;
                border-radius: 10px;
                display: grid;
                grid-template-columns: 33.3% 33.3% 33.3%;
                font-size: 15px;
                font-weight: bold;
           }
           
           
           .body_content .list{
                position: relative;
                background: #000;
                border: 1px solid transparent;
                border-radius: 10px;
                margin-top: 10px;
                display: grid;
                grid-template-columns: 33.3% 33.3% 33.3%;
                align-items: center;
                font-size: 15px;
                color: #ccc;
           }
           .body_content .title span,
           .body_content .list span{padding: 15px 10px;}

<div class="container">
            <header>
                <h1>TOP PICKED SPOTIFY SONGS</h1>
                <h3>Welcome User</h3>
            </header>
            <div class="body_content">
                <div class="title">
                    <span>TITLE</span>
                    <span>ARTIST</span>
                    <span>PLAY</span>
                </div>
                <div class="list">
                    <span>Song123</span>
                    <span>Artist 123</span>
                    <span>Play on Spotify</span>
                </div>
                <div class="list">
                  <span>Song123</span>
                  <span>Artist 123</span>
                  <span>Play on Spotify</span>
              </div>
              <div class="list">
                <span>Song123</span>
                <span>Artist 123</span>
                <span>Play on Spotify</span>
            </div>
            </div>
        </div>