Im unable to use position relative - html

Question

Expected result - the third blue box should be a little towards the right
i am unable to use left functon after doing position relative in the userated div . im trying to say that instead of moving right, it is just increasing in size . Below is a picture to help you understand what i am saying . after that i wrote all the html and css code.
Code Snippet:
* {
margin: 0px;
padding: 0px;
}
ul.navlist {
list-style: none;
display: flex;
padding: 0px;
margin: 0px auto;
width: 100%;
top: 30px;
align-items: center
}
.bar {
height: 100px;
width: 100%;
justify-content: left;
box-shadow: 0px 2px 5px;
display: grid;
grid-template-columns: 100px auto 80px;
}
.link1 {
margin-left: 30px;
text-decoration: none;
color: black;
font-size: 20px
}
.signin {
background: linear-gradient(to right, blue, rgb(20, 196, 255));
height: 38px;
width: 120px;
position: relative;
text-align: center;
font-size: 18px;
border-radius: 20%;
;
left: 200px;
top: -10px
}
.sign {
top: 15%;
position: relative;
color: white;
text-decoration: none
}
.introbox {
width: 700px;
height: 200px;
background-image: url('wal.jpg');
opacity: 0.75;
left: 25%;
position: relative;
background-position: center;
top: 10px;
border-radius: 5px;
font-weight: 600;
box-shadow: 0px 2px 5px;
}
.new {
font-size: 30px;
left: 6%;
position: relative;
font-weight: 400
}
.box1 {
height: 250px;
width: 200px;
background: green;
position: relative;
top: 2%;
display: grid;
font-size: 20px;
font-weight: 600
}
.box2 {
height: 250px;
width: 200px;
background: green;
position: relative;
top: 1%;
display: grid;
font-size: 20px;
font-weight: 600;
}
.lnlink {
text-decoration: none;
color: black;
}
.lightnovel1 {
display: flex;
flex-direction: row;
position: relative;
height: 580px;
width: 900px;
background: red;
left: 5%;
}
.ww {
margin: 20px;
height: 260px;
width: 180px;
font-size: 20px;
font-weight: 600
}
.pic2 {
height: 80%;
width: 100%
}
.ranki {
font-size: 15px
}
.ranktitle {
position: relative;
left: 5%;
font-size: 30px;
font-weight: 400
}
.ranking {
height: 580px;
width: 900px;
background: yellow;
display: flex;
flex-direction: row;
position: relative;
left: 5%;
}
.topview {
display: flex;
flex-direction: column;
height: 400px;
width: 200px;
background: blue;
}
.li {
float: left;
}
.newtrends {
display: flex;
flex-direction: column;
height: 400px;
width: 250px;
background: blue;
position: relative;
left: 5%
}
.userrated {
display: flex;
flex-direction: column;
height: 400px;
width: 250px;
background: blue;
position: relative;
left: -5%
}
<div class="bar">
<! me might not come for 2 month here or disc>
<nav>
<ul class="navlist">
<li><img src="background.png"></li>
<li>Search</li>
<li>Browse</li>
<li>Tags</li>
<li>Filter</li>
<li>Dev</li>
<li>
<div class="signin"><a href="#" class='sign'>Sign In</a></div>
</li>
</ul>
</nav>
</div>
<div class="introbox">
<h1>Read Light Novel & Web Novel Translations Online For FREE!</h1>
<p2>Your fictional stories hub</p2>
<br>
<p3>Looking for a great place to read Light Novels? Light Novel Pub is a very special platform where you can read the translated versions of world famous Japanese, Chinese and Korean light novels in English. Every new chapters published by the author is
updated instantly on the Light Novel Pub and notification service is provided to the readers.
</p3>
Start reading now to explore this mysterious fantasy world.
</div>
<br>
<br>
<div class="release">
<div class="title1">
<h3 class="new">New Ongoing Release</h3>
</div>
<div class="lightnovel1">
<div class="ww">
<img src="martialart.jpg" class="pic2">
Martial Art System
<div class="ranki">
<p2> Rank 1 </p2>
</div>
</div>
<div class="ww">
<img src="martialart.jpg" class="pic2">
Martial Art System
<div class="ranki">
<p2> Rank 1 </p2>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="ranktitle"> Ranking </div>
<div class="ranking">
<div class="misc">
<h2>Trending</h2>
<div class="topview" id="topviewid">
</div>
</div>
<div class="misc1">
<h2>most viewed</h2>
<div class="newtrends">
</div>
</div>
<div class="misc2">
<h2>User Rated</h2>
<div class="userrated">
</div>
</div>
</div>
float: right or left is causing this result

Answer 1

Your .userrated and .newtrends classes are both positioned in relation to their normal position. If you move the second div by 5% it overlaps with the third. If you now move the third by 5% you would moved them both by the same distance so they won't show a gap.
If you want the same gap between the second and the third div you need to set the third's left value to 10%.