I see a strange little gap where the white background is visible between the border of the container and the background of one of the children:
You see there is probably 1px gap. How to remove this annoying gap?
.login-modal {
background: white;
box-sizing: border-box;
--main-bg-color: rgb(70, 119, 139);
display: grid;
/* grid-auto-rows: minmax(20px, auto); */
grid-auto-columns: minmax(120px, 180px);
top: 10px;
position: absolute;
left: 50%;
transform: translate(-50%);
overflow: hidden;
border-radius: 7px;
color: var(--main-bg-color);
font-family: "Open Sans", sans-serif;
border: 1px solid var(--main-bg-color);
z-index: 1999;
}
#login-window-small.login-modal ul {
padding: 0;
margin: 0;
}
#login-window-small.login-modal li {
list-style-type: none;
margin: .5em;
}
#login-window-small.login-modal a {
text-decoration: none;
color: var(--main-bg-color);
}
.modal-head {
display: flex;
align-items: center;
color: white;
position: relative;
background-color: var(--main-bg-color);
}
.modal-head>span {
margin-left: 1em;
}
.modal-form {
margin-top: 1em;
}
.modal-form label {
margin: .5em 0;
}
.modal-social-links {
grid-column: 1/3;
display: flex;
margin: 0 0 2em 1em;
}
.form {
display: flex;
flex-direction: column;
font-size: 16px;
margin: 0 1em;
}
.form input[type="password"],
.form input[type="text"] {
height: 2em;
font-size: 16px;
border: 1px solid #aaa;
border-radius: 3px;
padding-left: 5px;
}
#login-window-small .form a {
display: flex;
justify-content: flex-end;
cursor: pointer;
}
#login-window-small .form a>span {
color: rgb(250, 91, 15);
}
.modal-head {
grid-row: 1/3;
height: 4em;
}
.modal-head,
.modal-form {
grid-column: 1/3;
}
.modal-buttons-cont {
display: flex;
justify-content: center;
}
.modal-buttons-cont button {
border: 1px solid var(--main-bg-color);
border-radius: .2em;
padding: .5em 1.5em;
font-size: 18px;
cursor: pointer;
}
.modal-buttons-cont.close {
grid-column: 1;
opacity: unset;
}
.modal-buttons-cont.signin {
grid-column: 2;
}
.modal-buttons-cont.close button {
color: var(--main-bg-color);
background-color: white;
}
.modal-buttons-cont.close button:hover {
background-color: #ebebeb;
}
.modal-buttons-cont.signin button {
color: white;
background-color: var(--main-bg-color);
}
.modal-buttons-cont.signin button:hover {
background-color: rgb(50, 99, 119);
}
.bottom-padd {
grid-column: 1/3;
grid-row: 6;
height: 2em;
}
.message-cont {
padding: 1em 2em;
}
.message-cont span {
color: red;
}
<div id="login-window-small" class="login-modal">
<div class="modal-head"><span>Member Sign In</span></div>
<div class="modal-form">
<form class="form" action="post">
<label for="uname"><b>Username</b></label>
<input id="username-input" type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input id="password-input" type="password" placeholder="Enter Password" name="psw" required>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
<a> <span>Lost Password</span> </a>
</form>
</div>
<div class="modal-social-links">
<ul>
<li><a href="">Fecebook</a></li>
<li><a href="">Twitter</a></li>
<li><a href="">Linkedin</a></li>
</ul>
</div>
<div class="modal-buttons-cont close">
<button>Close</button>
</div>
<div class="modal-buttons-cont signin">
<button>Sign In</button>
</div>
<div class="bottom-padd">
<div class="message-cont">
<span></span>
</div>
</div>
</div>