Hola estoy creando una copia de la pagina principal de búsqueda de Google. Estoy creando el footer con un grid para crear los dos espacios y darles los atributos. Mi pregunta es como puedo hacer que la linea que separa los dos rows sea de color blanco y de anchura un px. Dejo una imagen de como quiero que queda y de como esta quedando.
Como me esta quedando sin la linia:
Como veis en mi grid no consigo hacer aparecer esa fina linia que divide los dos rows. Adjunto codigo HTML y CSS a ver si alguien me puede hechar una mano:
Codigo HTML:
<footer class="grid">
<ul class="footer-top">
<li>
<a href="">España</a>
</li>
</ul>
<ul class="footer-top2">
<li>
<a href=""></a>
</li>
</ul>
<ul class="footer-top3">
<li>
<a href=""></a>
</li>
</ul>
<ul class="footer-left">
<li>
<a href="">Publicidad</a>
</li>
<li>
<a href="">Empresa</a>
</li>
<li>
<a href="">Cómo funciona la Búsqueda</a>
</li>
</ul>
<ul class="footer-center">
<li>
<a haref="">Emisión neutra de carbono desde el 2007</a>
</li>
</ul>
<ul class="footer-right">
<li>
<a href="">Privacidad</a>
</li>
<li>
<a href="">Condiciones</a>
</li>
<li>
<a href="">Preferencias</a>
</li>
</ul>
</footer>
Codigo CSS:
.grid{
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
display: grid;
grid-template-columns: 30% 36% 33%;
grid-template-rows: [y0] 50% [y1] 50%;
align-items: center;
font-size: 14px;
border-top: 1px solid #e4e4e4;
background: #f2f2f2;
border-top-color:1px solid #f2f2f2;
}
.grid ul{
margin: 10px;
list-style: none;
display: flex;
padding-left: 25px;
padding-right: 2px;
}
footer .footer-left{
justify-self: left;
}
footer .footer-center{
justify-self: center;
padding-left: 25%;
margin: 25px;
}
footer .footer-right{
justify-self: right;
}
footer ul li a{
margin: 10px;
color: #5f6368;
}