CSS Como tirar as margins automáticas do bootstrap

João Vitor Lumertz · 7 de novembro de 2018

Galera estou com o seguinte problema: eu criei dois menus e quero que os mesmos fiquem "colados" um no outro, mas acho que devido o bootstrap fica aquela margin automática travando essa opção.

meu html:

<body>
	<div class="col-xs-12">
		<div class="row mt-0">
			<nav class="col-md-12 menu">
				<ul>
					<li>Book Shop</li>
					<li>(51)9 9576-0442</li>
				</ul>
			</nav>
		</div>

		<div class="row mt-0">
			<nav class="col-md-12 menu-2">
				<ul>
					<li>Início</li>
					<li>Sobre</li>
					<li>Categorias</li>
					<li>Contato</li>
				</ul>
			</nav>
		</div>
	</div>
</body>

meu css :

/*-------PRIMEIRO MENU--------*/
.menu ul{
	text-align: right;
	list-style: none;
	padding: 5px;
	background-color: #0D0C0C
}

.menu ul li{
	display: inline;
	color: #EBE6E6;
}

.menu li{
	padding-left: 2%;
}

/*---------SEGUNDO MENU--------*/
.menu-2 ul {
	text-align: left;
	list-style: none;
	padding: 5px;
	background-color: #7B1414;
}

.menu-2 ul li{
	display: inline;;
	color: #F4D0D0;
}

.menu-2 ul li a{
	color: #F4D0D0;
	text-decoration: none;
	padding: 2px;
	display: inline-block;
}

.menu-2 ul li a:hover{
	background-color: #871D1D;
	color:#F5AEAE;

}

8 de novembro de 2018

É só colocar no CSS margin:0 em cada uma das ul de cada um dos menus, assim:

/*-------PRIMEIRO MENU--------*/
.menu ul{
	text-align: right;
	list-style: none;
	padding: 5px;
	background-color: #0D0C0C;
    margin: 0;
}

/*---------SEGUNDO MENU--------*/
.menu-2 ul {
	text-align: left;
	list-style: none;
	padding: 5px;
	background-color: #7B1414;
    margin: 0;
}

No primeiro menu já bastaria para colar os dois menus, mas é bom que nos dois tenham margim 0, caso algum outro navegador interprete que ambos tenham alguma margem.

o resultado é