CSS Larguras diferentes para colunas com mesmo tamanho

[Fertiin]

Tenho o código abaixo onde tenho atualmente duas linhas e a de baixo está com a largura maior que a primeira, sendo que as duas foram definidas como "col-lg-3", como soluciono?

 

<div class="row">
		<div class="col-lg-3">
			<header>
				<a href="pagina_incial" class="logo-link">
					<div class="topo-logo">
						<span href="pagina_inicial.php" class="logo align-middle">BUNNY</span>
					</div>
				</a>
			</header>
		</div>
	</div>
	<div class="row text-center">
		<div class="navegacao col-lg-3">
				<img src="imagens/vetor_foto_de_perfil.png" width="100" heigth="100" alt="Foto de perfil" class="fotoperfil rounded-circle" >
		</div>
	</div>

CSS:

div.topo-logo{
    background-color:#FFA500;
    margin:0;
    padding:15px;
}

span.logo{
    display:inline-block;
    color:white;
    font-size:25px;
    font-family: 'Quicksand', sans-serif;
    display:block;
    text-align: center;
}

a.logo-link:hover{
    text-decoration: none;
}

img.fotoperfil{
    border:2px dotted black;
}

div.navegacao{
    background-color:#f1b30a;
    padding:15px;
}

 

[DiF]

@Fertiin Pode ser conflito de regras, porque você está usando o bootstrap e ele já tem regras prontas e calculadas pelo grid.

Pode ser o padding que você definiu no elemento  com class navegação

[dudaskank]

Você pode colocar um outro div entre o col-lg-3 e a imagem com a classe navegação, assim a área usada como padding não é pintada, como na linha de cima.

 

https://codepen.io/dudaskank/pen/jdrRMe