Question posted in 
Before 
Which i’m tending to is the yellow line in the middle 
I’m using <hr> as the line which is in the middle of the 2 grid parts, but the color is not good, so I’m trying to make them the same color. Although I’m using <hr> as a line, you can use the border method.
I want the blank between those 2 grid parts to be unified or at least its background color to change to the same as the 2 grid parts
Here’s the code:
.lastpart {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
background-color: rgb(236, 236, 236);
padding: 10px;
margin: 10px 10px 10px 10px;
}
.grid-item-cer {
/* background-color: rgba(255, 255, 255, 0.886);
border: 1px solid rgba(0, 0, 0, 0.8); */
padding: 20px;
font-size: 30px;
}
.certify {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-weight: lighter;
font-size: 20px;
padding-bottom: 40px;
}
.spec {
border-right: 1px solid #d6c08d;
display: flex;
/* align-items: center;
justify-content: center; */
}
.s {
object-fit: cover;
object-position: center;
border: 0;
}
.giaikk {
font-weight: bold;
color: black;
font-size: 15px;
font-family: 'Courier New', Courier, monospace;
float: right;
padding-left: 20px;
}
.provekk {
font-weight: bold;
color: black;
font-size: 15px;
font-family: 'Courier New', Courier, monospace;
background-color: red;
padding-top: 30px;
}
.blank {
margin-right: 20px;
}
.spec2 {
display: flex;
/* align-items: center;
justify-content: center; */
margin-top: 60px;
}
.s2 {
border: 1px solid black;
}
.spec3 {
display: flex;
/* align-items: center;
justify-content: center; */
}
.blank2 {
margin-top: 10px;
}
.line {
width: 80%;
margin: 0 auto;
}<body>
<div class="lastpart">
<div class="grid-item-cer">
<h3 class="certify">Chứng Chỉ - Giải Thưởng</h3>
<div class="spec">
<img src="s.jpg" class="s" width="150px" height="200px">
<div class="blank">
<h5 class="giaikk">ĐẠT GIẢI KHUYẾN KHÍCH KHỐI 7 TOÀN QUỐC - IOE
<p class="provekk">-Chứng chỉ được cấp bỏi Internet Olympiads of English</p>
</div>
</h5>
</div>
</div>
<div class="grid-item-cer ">
<div class="spec2">
<img src="image.png" class="s" width="150px" height="200px">
<h5 class="giaikk">ĐẠT HUY CHƯƠNG BẠC TOÁN CẤP TỈNH VIOEDU
<p class="provekk">-Huy chương bạc cấp tỉnh toán cuộc thi toán qua mạng VIOEDU</p>
</h5>
</div>
</div>
</div>
<hr class="line">
<div class="lastpart">
<div class="grid-item-cer">
<div class="spec3">
<img src="2024_2_2_1305289694file01.jpg" class="s3" width="150px" height="200px">
<div class="blank2">
<h5 class="giaikk">ĐẠT GIẢI KHUYẾN KHÍCH KHỐI 7 TOÀN QUỐC - IOE
<p class="provekk">-Chứng chỉ được cấp bỏi Internet Olympiads of English</p>
</div>
</h5>
</div>
</div>
</div>
</div>
</body>
3
Answers
I don’t fully understand, it seems like you could just make it the same color, which would work fine.
if I understand your issue correctly, you can apply
background: transparent;to the line class in order to fix your issue.The horizontal rule is pushing your other elements with its margins. Those elements have the background color, separately from the horizontal rule. You want to put all three items (including horizontal rule and the elements before and after it) into a parent element, and then give that element the background color that you like