Eviter le décalage des éléments

Bonjour, j'ai un petit soucis que j'ai du mal a fixé, j'ai un menu ul li a en display inline pour avoir un menu horizontal, au survol de mes élément je leur applique une border de 3px solid red, mon border s'applique bien mais le border de 3px décale tout mes autres élément de 3px, or je voudrais avoir les bordure mais sans le décalage que rien ne bouge auriez vous une solution merci.

voici mon code :

	header.header{
		background-color: #5d2311;
		border-top: 8px solid #f29400;
		border-bottom: 8px solid #f29400;
		text-align: center;
		margin-top: 30px;
		height: 60px;
		width: 1920px;
		margin-right: auto;
		margin-left: auto;
	}

	/*Menu*/
	nav.navigation ul {
		float: left;
		margin-left: 220px;
		padding: 0;
	}

	nav.navigation ul li a{
		color: #fff;
		text-transform: uppercase;
		text-align: center;
		text-decoration: none;
		padding: 5px;
		display: block;
		margin: 0 30px;
		line-height: 50px;
		margin-top: -15px;
		
	}

	nav.navigation ul li{
		list-style: none;
		display: inline;
		float: left;

	}

	nav.navigation ul li a:hover{
		background-color: #361105;
		border-right: 3px solid #f29400;
		border-left: 3px solid #f29400;

	}

	nav.navigation ul li img{
		float: left;
		margin-top: -45px;
	}

	.ssmenu{
		display: none;
		position: absolute;
	}