CSS - making a div to have same width as the parent - html

Question

I have a page which is split into 3 main parts, header, inner body, and footer as noted in the css code. i'm trying to make the page responsive and fit into a 420px max width screen, so i used a media query for this, however when i do that, the inner body's width is smaller than the width of the footer and the header, it doesnt match, but rather way too small, i would like to make it fit the overall width of the page.
#media screen and (max-width:430px) {
//header:
div.logo {
width: 900px;
height: 400px;
background-color: rgb(147, 235, 238);
-ms-flex-item-align: center;
}
.content {
width: 100%;
height: 100vh;
padding: 0;
}
//inner body
div.inner-body {
height: auto;
border-style: solid;
margin-top: 15px;
margin-bottom: 15px;
width: 235%;
position: relative;
}
div.navi {
width: 900px;
font-size: 28px;
padding-bottom: 90px;
}
form {
font-family: Verdana, Geneva, Tahoma, sans-serif;
align-items: center;
border-radius: 40px;
width: 525px;
height: 700px;
background-color: rgb(99, 198, 223);
box-shadow: 0px 15px 20px rgba(0,0,0,0.5);
margin-top:500px
}
.userlogo {
width: 200px;
border-radius: 100px;
margin-top: -35px;
}
.area {
width: 280px;
height: 30px;
border-radius: 20px;
font-size: 25px;
padding: 5px;
font-style: oblique;
}
.btn {
width: 400px;
height: 60px;
font-size: 30px;
border-radius: 20px;
background-color: rgb(54, 88, 238);
cursor: pointer;
}
//footer
footer {
display: block;
width: 900px;
padding: 0;
list-style: none;
background-color: rgb(126, 226, 230);
font-size: 20px;
height: 300px;
}

Answer 1

First of all you are trying to use logo with width: 900px when your screen max-width:430px. Try to avoid using px and use % or rems, and than your design will be much more responsive. Anytime you are using pixels, you always need to be sure that everything fits perfectly and you need to write the code for any occasion when % or rems will help you to adjust the sizes by themselves.
Also use box-sizing: border-box; in your body. In that way padding and border are included in the width and height, so you will have more control.