Unable to make my static web page responsive

HTML-CSS
1

Little knowledge about flex/grid force me to use position property to align items. Can anyone give me some hints to make responsive . Thanks!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page</title>
    <link href="myCSS.css" rel="stylesheet">
    <link rel="stylesheet"href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"/>
</head>
<body>


    <div class="container">
        <div class="header">
            <div class="logo-left">
                <span class="material-symbols-outlined" style="font-size: 45px; color: rgb(79, 244, 14)" >
                    radio_button_checked
                </span>
                <div class="logo-text">
                    <h3>Welcome</h3>
                    <p style="font-size: 12px;">Guest</p>
                    </div>


            </div>
    
        <ul>
            <li class="btn"><a href="range.html"> Mode:<span class="material-symbols-outlined" style="color:rgb(12, 231, 30); font-size: 23px;">
                        sentiment_neutral
                        </span></a>
            
            </li>
            <li class="rain">
                <span class="material-symbols-outlined" style="color: rgb(17, 235, 53);">
                    rainy
                    </span>
                </li>
            <li class="user">
                <a href="login.html">
                <span class="material-symbols-outlined" style="color: rgb(114, 238, 13);">
                    account_circle
                    </span>
                </a>
                    </li>
                </ul>
            </div>

        <div class="content-main">
            <div class="upper-content">
                <div class="content-head-text">
                    <h3 style="color: rgb(93, 212, 8); font-size: 20px;">Ready For Today?</h3>
                    <p style="font-size: 13px;">You have 3 tasks palnned for today</p>
                </div>
                <div class="content-btn">
                  <a href="/task.html" > <button class="task">+ Add Task</button></a>
                    <button class="complete">Completed All</button>
                    <button class="show-complete">Show Completed </button>
                </div>
             </div>
        
            
    
            <div class="body-inside">
                <div class="run">
                    <div class="run-text">
                
                    <h5>Run!</h5>
                    <p style="font-size: 11px;">4 mins</p>
                    

                        <p>12:21 PM</p>
                    
                </div>
                    
                <div class="tick1">

          <span class="material-symbols-outlined" style="color: rgba(83, 239, 62, 0.91);">
         check_circle
               </span>
                </div>
            </div>
                <div class="don-run">
                    <div class="dont-run-text">
            
                         <h5>Don't Run</h5>
                        <p style="font-size: 11px;">34 mins</p>
                
                        <p>12:34 AM</p>
                        </div>
                    <div class="tick2" style="color: rgba(43, 243, 67, 0.733);" >
                        <span class="material-symbols-outlined">
                            check_circle
                            </span>
                    </div>
                </div>
                <div class="back-brwn">
                 <div class="jack-text">
                    <h5>Back Brownies</h5>
                    <p style="font-size: 11px;">809 mins</p>
                    <p>12:09 PM</p>

                 </div>
                 <div class="special" style="color: rgba(42, 233, 55, 0.923);">
                    <span class="material-symbols-outlined">
                        check_circle
                        </span>
                 </div>
                </div>
            </div>
        </div>
        <div class="content-main-right">
                <h3 style="font-size: 15px;"> Suggested tasks</h3>
            <div class="content-main-right-inside">
                <div class="read-book">
                <div class="left-item">
                    
                        <h4 style="color: rgb(239, 204, 9);">Read A Book</h4>
                        <p>45 mins</p>
                         <p>12:43 PM</p>
                
                </div>
                    <div class="right-item">
                        
                                <span class="material-symbols-outlined" style="color: rgba(219, 198, 15, 0.963);">
                                    sentiment_neutral
                                    </span>
                            
                            <p style="font-size: 12px;">Based on</p>
                            <h4 style="color: rgba(235, 188, 32, 0.87);">Mode</h4>
                                <span class="material-symbols-outlined" style="color: rgba(42, 237, 28, 0.988);">
                                    check_circle
                                    </span>
                        
                    </div>
                </div>
            </div>
                    <div class="meditation-box">
                        <div class="meditation-left">
                        
                                <h4 style="color: rgb(41, 237, 23);">Meditation</h4>
                                <p>15 mins</p>
                                <p>12:43 PM</p>
                        
                        </div>

                        <div class="meditation-right">
                                
                            <span class="material-symbols-outlined" style="color:rgba(63, 246, 69, 0.868)">
                                cloud
                                </span>
                            <p  style="font-size: 12px;">Based On</p>
    
                            <p style="text-align:center">Weather-Mostly Cloudy</p>
                            <span class="material-symbols-outlined" style="color: rgba(83, 239, 55, 0.855);">
                                check_circle
                                </span>
                            
                        </div>


                    </div>

                
        </div> 
    </div>

</body>
</html>

Here are the CSS:

* {
    box-sizing: border-box;

}

.container {
    width: 77%;
    height: 670px;
    background-color: black;
    color: white;
    position: relative;
}

.header {
    display: flex;
    justify-content: space-around;

}

.logo-left {
    display: flex;
    position: absolute;
    top: 31px;
    left:30px;
}

.material-symbles-outlined {
    position: relative;
    font-size: 30px;
}

.logo-text {
    position: relative;
    top:0;
    left: 20px;
    font-size: 15px;
    line-height: 0;
}

ul {
    display: flex;
    align-items: center;
    gap:10px;
    position: absolute;
    top:28px;
    right:50px;
    list-style-type:none;
    cursor: pointer;

}
.btn {
    display:flex;
    align-items: center;
    text-decoration: none;
    background-color: rgba(93, 89, 89, 0.866);
    border-radius: 30px;
    font-size: 12px;
    padding: 6px;
    height: 27px;
}
.btn a {
    text-decoration: none;
    font-size: 12px;
    color: white;
    display: flex;
    align-items: center;
}

.rain {
    height: 25px;
    width: 25px;
    background-color: #6d6868cd;
    border-radius: 50%;
    display: inline-block;
    

}
.user {
  height: 25px;
  width: 25px;
  background-color: #6d6868cd;
  border-radius: 50%;
  display: inline-block;
}

.content-main {
    position: absolute;
    bottom: 197px;
    left: 30px;
    width: 645px;
    height: 350px;
    background-color: rgba(41, 42, 43, 0.638);
    border-radius: 8px;
}
.upper-content {
    display: flex;
    margin-left: 20px;
    margin-top: 15px;
    position: relative;
}
.content-head-text{
    line-height: 4px;
    position: absolute;
    left: 20px;
}
.content-btn{
    position: absolute;
    right: 45px;
    top: 20px;
    font-size: 15px;
}
.task {
    padding: 10px;
    height: 32px;
    border-radius:20px ;
    border: none;
    margin-left: 10px;
    background-color: rgba(140, 136, 136, 0.241);
    color: white;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
}
.complete {
    padding: 12px;
    height: 36px;
    border-radius: 20px;
    margin-left: 15px;
    background-color: rgba(93, 237, 21, 0.836);
    border: none;
    text-align: center;
}
.show-complete {
    padding: 14px;
    height: 39px;
    border-radius: 20px;
    margin-left: 15px;
    background-color: rgba(100, 236, 15, 0.914);
    border: none;

}

.content-main-right{
    position: absolute;
    bottom: 116px;
    right: 45px;
    width: 430px;
    height: 430px;
    background-color: rgba(41, 42, 43, 0.638);
    border-radius: 8px;
    padding: 20px;
}

.body-inside {
    position: relative;
}

.run {
    width: 280px;
    height: 110px;
    background-color: rgba(78, 86, 84, 0.901);
    position: absolute;
    top: 85px;
    left:30px;
    border-radius: 7px;
}
.run-text {
    position: absolute;
    left:10px;
}


.tick1 {
    position: absolute;
    right:0;
}

.don-run {
    width: 280px;
    height: 110px;
    background-color: rgba(78, 86, 84, 0.901);
    position: absolute;
    right: 44px;
    top: 85px;
    border-radius: 7px;
}

.dont-run-text {
    position: absolute;
    left:10px;
}

.tick2{
    position: absolute;
    right: 0;
}
.back-brwn{

    width: 280px;
    height: 110px;
    background-color: rgba(78, 86, 84, 0.901);
    position: absolute;
    left: 30px;
    top:210px;
    border-radius: 7px;

}
.jack-text{
    position: absolute;
    left: 10px;

}

.special {
    position: absolute;
    top: 0;
    right:0;
}

.content-main-right-inside {
    position: relative;
}

.read-book {
    width: 380px;
    height: 138px;
    position: absolute;
    top: 16px;
    background-color: rgba(78, 86, 84, 0.901);;
    border-radius: 7px;
}
.left-item  {
    position: absolute;
    left : 10px;
    line-height: 4px;
}
.right-item {
    position: absolute;
    right:10px;
    text-align-last: right;
    width: 40vw;
    top: 5px;
    line-height: 12px;
}

.meditation-box{
    width: 380px;
    height: 138px;
    position: absolute;
    bottom: 60px;
    background-color: rgba(78, 86, 84, 0.901);;
    border-radius: 7px;
}

.meditation-left {
    position: absolute;
    left:10px;
    line-height: 4px;
}

.meditation-right {
    position: absolute;
    right:10px;
    text-align-last: right;
    width: 40vw;
    top:5px;
}
2

Please put your question in the body of the post instead of the title

3

sorry just new here.

4

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

5

Thanks for correcting.