Try and add padding:center to the .boxitem and try to make the first container to float up
Solution 1 :
Problem :
I’m currently working on a 100dayscss.com clone page for practice purposes.
I’m trying to do it in my own fashion, peaking at the source code every now and then. I’ve got this lovely code that does not cooperate with me very well.
My main problem is: I’d like to center the .box item, but it just keeps being “off” and expanding the size of the page. How do I make it work so it just gets in the middle of it, right below the first container?
I would like to keep an even margin between the sides of the page, and a slight margin in between the 2 boxes.
Is there a convenient way to center such items, relatively to the size of the page?
I also tried to set the .container2‘s position to relative, but it doesn’t appear relative to the first .container, and messes everything up.
It comes with another questions:
How do I make the page horizontally static? We all know how inconvenient it is to operate on this axis, and I really don’t want to have that horizontal scroll-bar ever. What mistakes should I avoid?
Here’s the code, perhaps someone could help me out. 🙂 Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
background-color: whitesmoke;
font-style: monospace;
font-size: 16px;
margin: 0;
padding: 0;
}
.container {
position: absolute;
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
}
.item {
padding: 2rem 1rem;
font-size: 2rem;
line-height: 1;
text-align: center;
background: whitesmoke;
color: #51aaa3;
}
.item-1 {
flex-grow: 1.5;
background-color: whitesmoke;
z-index: 4
}
.item-2 {
flex-grow: 2;
background-color: blue;
z-index: 1
}
.bg {
position: absolute;
top: 50%;
right: 40%;;
height: 1200px;
width: 700px;
margin-top: -600px;
background-color: whitesmoke;
-webkit-box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
border-radius: 50%;
z-index: 2;
box-shadow: none;
}
.container2 {
top: 100%;
left: 50%;
margin: 24px 32px;
position: absolute;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
z-index: 20;
}
.box {
background-color: orange;
width: 400px;
height: 400px;
margin: 24px 32px;
}
</style>
</head>
<body>
<div class="container">
<div class="bg"></div>
<div class="item item-1"></div>
<div class="item item-2"></div>
</div>
<div class="container2">
<div class="box"></div>
<iframe class="box" src="https://www.youtube.com/embed/fJ9rUzIMcZQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</body>
</html>