I have this html code
<img src="/static/media/call-of-duty-mobile-promo-banner.c6a9b17af598e76351f1.jpg" id="banner" alt='' />
<div id="DIV_1">
<div id="DIV_2">
<div id="DIV_3">
login
</div>
</div>
<div id="DIV_4">
<img src='cart.jpg'></img>
</div>
</div>
but there is a white space between first img and div with id DIV_1
btw I have tried to put margin and padding of those 2(img and red div) to 0 but still didnt work.
and when I inspect with browser that white space(looks like a white line) doesnt belong to neither img or red div
so how to remove gap?
this is the css
#banner {
box-sizing: border-box;
column-gap: 0px;
row-gap: 0px;
width:100vw;
font: 16px "Times New Roman";
margin: 0;
padding: 0;
}
#DIV_1 {margin: 0;
padding: 0;
align-content: center;
align-items: center;
box-sizing: border-box;
display: flex;
height: 50px;
width: 1486.93px;
background: red;
font: 16px "Times New Roman";
}/*#DIV_1*/
#DIV_2 {
align-content: center;
align-items: center;
block-size: 50px;
box-sizing: border-box;
display: flex;
height: 50px;
inline-size: 490.683px;
min-block-size: auto;
min-height: auto;
min-inline-size: auto;
min-width: auto;
perspective-origin: 245.333px 25px;
transform-origin: 245.342px 25px;
width: 490.683px;
font: 16px "Times New Roman";
}/*#DIV_2*/
#DIV_3 {
block-size: 30px;
border-block-end-color: rgb(50, 67, 79);
border-block-end-style: solid;
border-block-end-width: 2px;
border-block-start-color: rgb(50, 67, 79);
border-block-start-style: solid;
border-block-start-width: 2px;
border-end-end-radius: 30px;
border-end-start-radius: 30px;
border-inline-end-color: rgb(50, 67, 79);
border-inline-end-style: solid;
border-inline-end-width: 2px;
border-inline-start-color: rgb(50, 67, 79);
border-inline-start-style: solid;
border-inline-start-width: 2px;
border-start-end-radius: 30px;
border-start-start-radius: 30px;
box-sizing: border-box;
caret-color: rgb(33, 37, 41);
color: rgb(33, 37, 41);
column-rule-color: rgb(33, 37, 41);
cursor: pointer;
direction: rtl;
height: 30px;
inline-size: 94px;
min-block-size: auto;
min-height: auto;
min-inline-size: auto;
min-width: auto;
overflow-wrap: break-word;
perspective-origin: 47px 15px;
text-align: center;
text-decoration: none solid rgb(33, 37, 41);
text-emphasis-color: rgb(33, 37, 41);
text-size-adjust: 100%;
transform-origin: 47px 15px;
width: 94px;
background: rgb(78, 254, 177) none repeat scroll 0% 0% / auto padding-box border-box;
border: 2px solid rgb(50, 67, 79);
border-radius: 30px;
font: 700 13px / 26px IRANSans, "Open Sans";
list-style: outside none none;
outline: rgb(33, 37, 41) none 0px;
}/*#DIV_3*/
#DIV_4 {
align-content: center;
block-size: 50px;
box-sizing: border-box;
display: flex;
height: 50px;
inline-size: 996.233px;
justify-content: flex-end;
min-block-size: auto;
min-height: auto;
min-inline-size: auto;
min-width: auto;
perspective-origin: 498.117px 25px;
transform-origin: 498.117px 25px;
width: 996.233px;
font: 16px "Times New Roman";
}/*#DIV_4*/
