I am currently facing an issue where I am trying to move the red box with text inside of it down by 100px, but it doesn't seem to be working as intended. You can see the problem in this image (https://gyazo.com/786598af68920c4900aac6ba6a5b3022). It appears that not only the red box but also the support_wrapper div is getting pushed down by 100px. I have searched extensively for a solution to this issue without success. I apologize for asking such a basic question, but any assistance would be greatly appreciated :)
<html>
<head>
<style>
body {
background-color: #252525;
}
#support_wrapper {
/* Setting the size of the wrapper */
width: 1200px;
height: 1600px;
/* Backgrond image properties */
background-image: url("Support.png");
background-position: center;
background-repeat: none;
/* Center the div */
margin: 0 auto;
padding: 0 auto;
}
#form_wrapper {
/* Debugging */
border: 1px solid black;
background-color: red;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="support_wrapper">
<div id="form_wrapper">
<p> text in the form box </p>
</div>
</div>
</body>
</html>