Help with making my project mobile responsive

Hello!
I have been taking the responsive design course and it has been the toughest class so far. I am not giving up and I want to keep trying. I attempted to make the home page of my project responsive but nothing has worked. I am struggling in particular with how media queries work. Please see my HTML code and CSS code below:

<!DOCTYPE html>
<html>
<link href="resources/CSS/home.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400|Playfair+Display" rel="stylesheet">

<head>
<title>Home|Blossom Postnatal</title>
</head>
<body>

<!--Header Section-->

<div>
<header>
<nav>
    <ul id="nav">
        <li><a href="services.html">Services</a></li>
        <li><a href="index.html">About</a></li>

</ul>
</nav>
</header>
</div>

 
<!--Banner Section-->
<div class="container">
    <div id="text-box">
        <h4 class="empower">Empowering Mothers</h4>
        <div class="support">Supporting Families</div>
        </div>
        <div id="learn">Learn More</div>
</div>




<!--Content Section-->
<div class="content">
<p1> Based in Abuja, Nigeria, we provide tailored postnatal care for mothers and new borns.</p1>
   <div id="blurb">
<p2> We believe no two mothers are the same, neither are two newborns. We work together with mothers and families to provide outstanding care while considering the needs of both mother and child.</p2>
<p3> We provide our service from the comfort of your home so you can be rest assured that you will be getting required privacy and comfort while we care for you. Our services are of a wide variety and we offer packages to suit required need.</p3>
</div>
<div id="package">See Our Packages</div>
</div>
</body>

<!--Footer Section-->
<div id="footer">
<footer>
&copy Blossom Postnatal 2019
</footer>
</div>
</html>
    list-style: none;
}
#nav{
    margin: 10px;
    width: 1000px;
    height: 30px;
    font-family: 'Playfair Display', serif;
}
#nav li{
    display: block;
    width: 120px;
    float: right;
}
#nav a{
    text-decoration: none;
    display: block;
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    color: rgb(218, 112, 214);
}   
.container{
    position: relative;
    text-align: center;
    background-image: url(https://www.charlottefive.com/wp-content/uploads/2019/04/childbirth.jpg);
    background-size: cover;
    height: 500px;
    
}
#text-box{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    float: right;
    top: 120px;
    left: 300px;
}
#text-box .empower{
    text-transform: uppercase;
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    color: rgb(22, 16, 22);
    margin-bottom: 50px;
    line-height: 5px;
    height: 10px;
    letter-spacing: 7px;  
}
#text-box .support{
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    font-weight: 300;
    color: rgb(8, 2, 8);
    margin-bottom: 50px;
    line-height: 5px;
    height: 5px;   
}
#learn{
    border: 2px rgba(218, 112, 214, 0.7) dotted;
    background-color: rgba(218, 112, 214, 0.7);
    font-family: 'Playfair Display', serif;
    color: rgba(248, 248, 248, 0.7);
    width: 300px;
    float: right;
    bottom: 120px;
    left: 800px;
    position: absolute;
    margin-bottom: 80px;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-size: 20px;  
}
.content{
    text-align: center;
    line-height: 50px;
    display: block;
    bottom: 120px;
    

}
#blurb{
    font-family: 'Montserrat', sans-serif;  
    font-weight: 300;
    line-height: 30px;
    font-size: 16px;

}
.content p1{
    font-family: 'Playfair Display', serif;
    color: rgb(218, 112, 214);
    font-size: 18px;
    letter-spacing: 2px;
    top: 150px;
}
#package{
    border: 2px rgba(218, 112, 214, 0.7) dotted;
    background-color: rgba(218, 112, 214, 0.7);
    font-family: 'Playfair Display', serif;
    color: rgba(248, 248, 248, 0.7);
    position: relative;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-size: 18px; 
    display: inline;
}

#footer{
    background-color: rgba(54, 53, 54, 0.5);
    font-family: 'Playfair Display', serif;   
    color: rgb(248, 248, 248); 
}
@media only screen and ( max-width 480px ){
   #text-box{
       width: 10%;
       height: 10%
   } 
   #text-box .empower{
       width: 10px;
   }
}

I am also unsure of my code as well. But any help and advice on how to get this right is appreciated.
This is the link to the lesson:https://www.codecademy.com/paths/learn-how-to-build-websites/tracks/responsive-design-and-accessibility/modules/learn-responsive-design-module/lessons/sizing-elements/exercises/review-relative-measurements