As a beginner in web development using html/css, I am eager to learn and create something simple.
I want to design a responsive fixed box that always maintains a 20px distance from the viewport edges.
The idea is that as the screen size changes, the box will consistently have a 20px margin on all sides without any scrolling necessary. Additionally, I envision placing a .gif at the center of this box that scales with the screen size, approximately 40em in size.
However, I've encountered challenges in achieving this design. Despite trying various solutions and consulting multiple tutorials, I have yet to find one that completely eliminates issues such as unwanted scrollbars, uneven margins, or difficulty controlling the layout.
If you have any advice or guidance on how to accomplish this design accurately, I would greatly appreciate it!
Below is an example of my current attempt, though it represents just one of many failed trials. (the .gif image is not included)
body {
background: #f0e8e6;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
div {
width: 90vw;
height: 90vh;
padding-top: 100px;
padding-bottom: 100px;
padding-left: 100px;
padding-right: 100px;
position: center;
top: 50%;
left: 50%;
background: #ffffff;
text-align: center;
overflow: hidden;
}<div>
</div>