div overflow it parent div and unsolved margins-CodePudding

i have a problem with the info div overflowing it parent container but not it content ,some other component are also overflowing but it's not a problem and a margins problem some are just there and the others won't appear at all this is happening in width under 375px plus if any one has an idea why the font awesome icon appears as a square i couldn't find a solution

update

the overflow problem has been solved but i still have a problem with the extra margin of the html on the right and the lack of for the container

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8 y gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>Document</title>
</head>
<body>
   <div >
    <img src="images/image-product-desktop.jpg" alt="">
    <div >
        <span >Perfume</span>
        <h1 >Gabrielle Essence Eau De Parfume</h1>
        <p>A floral, solar and voluptuous interpretation composed by Oliver Polge, Perfumer-Creator for the House of CHANEL.</p>
        <div >
            <span >$149.99</span>
            <span >$169.99</span>
        </div>
        <button><i ></i> Add To Cart</button>
    </div>
   </div> 
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],700&family=Montserrat:wght@500;700&display=swap');
*{
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    color: hsl(228, 12%, 48%);
}
html{
    margin: 0;
}
body{
    background-color: hsl(30, 38%, 92%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}
.container{
    max-width: 37rem;
    max-height: 45rem;
    display: flex;
    background-color: #fff;
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
}
img{
    max-width: 18.5rem;
    max-height: 45rem;
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
}

.title{
    font-family: 'Fraunces', serif;
    color: black;
    margin: .8rem auto 1rem;
}
.info{
    padding: 1.9rem;  
}
p{
    font-size: 14px;
    line-height: 1.3rem;
}
.prices{
    margin: 1.5rem auto 1.3rem;
    display: flex;
    align-items: center;
}
.newprice{
    font-family: 'Fraunces', serif;
    font-weight: 700;
    color: #658354;
    font-size: 2rem;
}
.oldprice{
    text-decoration:line-through;
    font-size: .7rem;
    margin: 1rem;
}
button{
    color: #fff;
    background-color: #658354;
    width: 100%;
    padding: 1.5rem 1rem;
    font-size: .8rem;
    border: none;
    padding: .7rem;
    border-radius: .5rem;
    cursor: pointer;
}
button:active{
    background-color: #2f4125;
}
@media(max-width : 375px){
    *{
        margin: 1rem;
    }
    img{
        width: 100%;
        height: 40%;
        border-radius: .5rem;
    }
    .container{
        display: block;
    }
    .info{
        margin-bottom: 1rem;
        padding: 0;
        height: 100%;
    }
}

CodePudding user response：

you can add in css

@media screen and (min-width: 320px) and (max-width: 375px) {
//your code
}

CodePudding user response：

remove the max-height: 45rem; property from container class

CodePudding user response：

for any one who has the margin problem as i do here i solved it by eliminating the body height and width to auto in the 375 max-width media