I am pretty new to web development so I am facing a margin issue which I think I might be due to position element in css,I'm not sure though .Here in code I have posted below is just a code for practice purpose on position element in css.
Here's my html code:
<!DOCTYPE html>
<head>
<title>Position Demo</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<header>
<span class="title-text">Position Demo</span>
</header>
<div class="container-1"></div>
<div class="container-2"></div>
</body>
And here's my css code:
html {
font-size: 62.5%;
}
*,
html,
body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.title-text {
font-size: 3rem;
text-align: center;
display: inline-block;
}
.container-1 { <!-- this container has right margin even though I have set margin to 0-->
width: 10rem;
height: 10rem;
position: relative;
top: 30%;
left: 0;
margin-right: 0;
background-color: rgb(218, 173, 173);
}
.container-2 { <!-- this container has right margin even though I have set margin to 0-->
width: 10rem;
height: 10rem;
position: relative;
top: 30%;
left: 30%;
margin-right: 0;
background-color: rgb(149, 218, 183);
}
question from:
https://stackoverflow.com/questions/65603135/margin-problem-in-css-while-using-position-element 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
