I’m pretty new to CSS so apologies for this question in advance. I know that it’s pretty easy, but I can’t create an element that is fully stretched in both directions (consider padding, please). Here is my try:
* {
background-color: lightblue;
}
body {
display: flex;
justify-content: left;
overflow:hidden;
height: 100%;
}
.timeline {
width: 85%;
height: 25%;
background: #ECF1F524;
mix-blend-mode: normal;
backdrop-filter: blur(15px);
overflow: hidden;
position: absolute;
box-shadow: 0px 20px 53px -30px rgba(95, 102, 173, 0.566816);
border-radius: 30px;
padding-top: 100px;
padding-right: 100px;
padding-bottom: 100px;
padding-left: 100px;
}<html>
<body>
<div class="main">
<div class="timeline"/>
</div>
</body>
</html>>Solution :
In your code you are mixing different techniques. One way to achieve the result is using "static" positioning (default) is the following. I suggest you to take a look at the box sizing property when struggling with paddings. It’s generally useful to set box-sizing: border-box for all elements.
The other tricky part is setting a full height. All parent elements should have a height: 100% to stretch full width.
* {
box-sizing: border-box;
}
html,
body,
.main {
background-color: lightblue;
height: 100%;
margin: 0;
padding: 4px;
}
.timeline {
width: 100%;
height: 100%;
background: #ECF1F524;
mix-blend-mode: normal;
backdrop-filter: blur(15px);
box-shadow: 0px 20px 53px -30px rgba(95, 102, 173, 0.566816);
border-radius: 30px;
padding-top: 100px;
padding-right: 100px;
padding-bottom: 100px;
padding-left: 100px;
}<html>
<body>
<div class="main">
<div class="timeline" />
</div>
</body>
</html>