🎨 Meilleur placement de l'en-tete

source/components/pages/Header.css

@@ -21,15 +21,23 @@
 #header #logo {
 	width: calc(1vw + 5em);
 }
+
+#headerRight {
+   min-width: 8em
+}
+
+
 #menuButton {
 	font-size: 300%;
 	color: #3c4963;
-	margin: 0 0.4em;
+	margin: 0;
+	margin-left: .6em;
 	display: inline-block;
 }
 nav {
 	font-size: 110%;
 	margin-bottom: 1em;
+	margin-left: 1em;
 	display: inline-block;
 }
 #header #marianne {
@@ -74,10 +82,6 @@ nav a {
 		display: none;
 	}
 
-	nav {
-		margin-right: 1em;
-	}
-
 	nav a {
 		margin: 0.8em;
 		font-size: 85%;

source/components/pages/Header.js

@@ -58,7 +58,12 @@ export class Header extends Component {
 					/>
 					<h1>Simulateur d'embauche</h1>
 				</Link>
-				<div id="headerContent">
+				<div id="headerRight">
+					<img
+						id="marianne"
+						src={require('Images/marianne.svg')}
+						alt="Un service de l'État français"
+					/>
 					<div id="menuButton">
 						{this.state.mobileNavVisible ? (
 							<i
@@ -77,11 +82,6 @@ export class Header extends Component {
 					<nav className={this.state.mobileNavVisible ? 'visible' : ''}>
 						<Links toggle={this.togglemobileNavVisible} />
 					</nav>
-					<img
-						id="marianne"
-						src={require('Images/marianne.svg')}
-						alt="Un service de l'État français"
-					/>
 				</div>
 			</div>
 		)