DIV does not respect dimension after mouse-over

Question

I’m with that code.

The idea is to get div.topo accompany to width of Browse in up to 90% limited á 1440px when it stops tracking and keeps the width fixed.

That part is OK.

The problem is that when I pass the mouse on the div, that is, happens the mouse-over, then the limit of 1440px gets lost and the div increases

		@import url('http://fonts.googleapis.com/css?family=Open+Sans');
		*,
		*:before,
		*:after,
		*:active,
		*:hover {
			font-family: 'Open Sans';
			margin: 0;
			padding: 0;
			border: 0;
			outline: none;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
		
		body {
			height: 100%;
			font-family: "Futura Std Book";
		}
		
		a {
			text-decoration: none;
			/*color: #fff*/
		}
		
		ul {
			list-style: none;
		}
		
		label {
			display: block;
			position: relative;
			margin: 0 auto;
		}
		
		label img {
			display: block;
			width: 100%;
			max-width: 100%;
		}
		
		img {
			height: auto;
		}
		
		body> div {
			position: relative;
			display: flex;
			max-width: 1440px;
			width: 90%;
			margin: 0 auto;
		}
		
		body> div> div {
			flex-direction: row;
		}
		
		body div.topo {
			justify-content: space-between;
		}
		
		body div.topo ul li {
			display: inline-block;
			width: auto;
			height: 50px;
			line-height: 50px;
			padding: 0 2px;
			border: .1px solid #000;
		}

	<div class=topo>
		<div class=logo><img src="img/home.jpg" style="width: 300px;"/>
		</div>

		<div class=menu>

			<ul>
				<li>Institucional</li><!--
			--><li>Missão</li><!--
			--><li>Visão</li><!--
			--><li>Valores</li><!--
			--><li>Relacionamento</li><!--
			--><li>Cartão Fidelidade</li><!--
			--><li>Economia.</li><!--
			--><li>Contato</li><!--
			--><li>Dúvidas</li>

			</ul>


		</div>
	</div>

I made a recourse, even worked, but I found half gabiarra.

I wish I knew where I was going wrong.

The resource is:

body > div,
body > div:hover {
    position: relative;
    display: flex;
    max-width: 1440px;
    width: 90%;
    margin: 0 auto;
}

Answer 1

Removes the *:hover of your css, this changes all elements of the page hover, in the case of div is that it leaves the margin at 0 in all directions, no longer centralized from when it was with the rule margin: 0 auto.