Flex : space-around nie równa odpowiednio elementów :(

Question

Czy ktoś jest w stanie mi powiedzieć dlaczego display:flex z justify-content:space-around, nie układa mi równo elementów? Chodzi o to, że odstęp od prawej krawędzi footera jest większy niż od lewej krawędzi footera...

HTML

<footer>
<div class="footer-el"><span class="f-grey">Warto być z nami!</span><br><br>
Tekst testow<br><br>
<input type="email" placeholder="Podaj email"><br>
<input type="submit" value="Zapisz">
</div>

<div class="footer-el"><span class="f-grey">Kontakt</span><br><br>
<a  href="tel:+48555555555">Tel. +48 555 555 555</a><br><br>
<a  href="mailto:biuro@kontakt.pl">E-mail: biuro@kontakt.pl</a><br> 
</div>

<div class="footer-el">
<span class="f-grey">Media społecznościowe</span><br><br>

	<div class="social">
		<div class="social-el"><a href="#"><i class="fa-brands fa-facebook fa-2x"></i></a></div>
		<div class="social-el"><a href="#"><i class="fa-brands fa-youtube fa-2x"></i>AAA<a></div>
		<div class="social-el"><a href="#"><i class="fa-brands fa-instagram fa-2x"></i><a></div>
	</div>
</div>	

</footer>

CSS

footer
{
	padding: 40px 20px 40px 20px;
	display:flex;
	background-color:black;
	width:100%;
	justify-content:space-around;
}

.footer-el
{
	border-top:1px solid grey;
	color:white;
	font-size:0.9rem;
	width:20%;
	justify-content:center;
	text-align:center;
	padding:10px;
	line-height:1.3;

}

.f-grey
{
	color:grey;
}

.social
{
	display:flex;
	justify-content:center;
}

.social-el
{
margin:10px;
}

.footer-el a
{
	color:white;
	text-decoration: none;
	font-size:0.9rem;
}
.footer-el a:hover
{
color:#D90A2C;
transition:0.3s;
}

 

Answer 1

Masz niedomknięte element <a>

<footer>
  <div class="footer-el">
    <span class="f-grey">Warto być z nami!</span><br><br>
    Tekst testow<br><br>
    <input type="email" placeholder="Podaj email"><br>
    <input type="submit" value="Zapisz">
  </div>
 
  <div class="footer-el">
    <span class="f-grey">Kontakt</span><br><br>
    <a href="tel:+48555555555">Tel. +48 555 555 555</a><br><br>
    <a href="mailto:biuro@kontakt.pl">E-mail: biuro@kontakt.pl</a><br> 
  </div>
 
<div class="footer-el">
  <span class="f-grey">Media społecznościowe</span><br><br>
 
  <div class="social">
    <div class="social-el">
      <a href="#"><i class="fa-brands fa-facebook fa-2x"></i></a>
    </div>
    <div class="social-el">
      <a href="#"><i class="fa-brands fa-youtube fa-2x"></i>AAA<a>        
    </div>
    <div class="social-el">
      <a href="#"><i class="fa-brands fa-instagram fa-2x"></i><a>
    </div>
  </div>
</div>    
 
</footer>

 

i w css footer właściwość padding zapisałbym tak

footer
{
    padding: 40px 0;
    display:flex;
    background-color:black;
    width:100%;
    justify-content:space-around;
}

 

Comments

VBService jesteś Kozak! Wielkie dzięki :)