src/template/Header/index.module.scss

@@ -234,6 +234,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
+	padding: 0 16px;
 }
 
 // styles for menu is active

src/template/Header/index.tsx

@@ -44,16 +44,18 @@ export const Header = () => {
 		<header className={css.header}>
 			<nav className={css.nav}>
 				<div className={css.content}>
-					<button onClick={handleOpen} className={css.open} type="button">
+					<button
+						onClick={handleOpen}
+						className={css.open}
+						type="button"
+						data-jsx="event"
+					>
 						<img src={openIcon} alt="ícone do botão para abrir o menu" />
 					</button>
 
 					<a className={css.logo} href="/">
 						<picture>
-							<source
-								media="(min-width:1025px)"
-								srcSet={logoMediumImg}
-							></source>
+							<source media="(min-width:1025px)" srcSet={logoMediumImg} />
 							<img src={logoImg} alt="logo da M3 Academy" />
 						</picture>
 					</a>
@@ -73,11 +75,19 @@ export const Header = () => {
 					<Search className={`${css.search} ${css['search-bottom-content']}`} />
 				</div>
 
-				<div className={`${css.menu} ${isOpenMenu ? css.active : ''}`}>
+				<div
+					className={`${css.menu} ${isOpenMenu ? css.active : ''}`}
+					data-jsx="target"
+				>
 					<div className={css['menu-content']}>
 						<div className={css['actions-bottom']}>
 							<a href="/">Entrar</a>
-							<button onClick={handleClose} className={css.close} type="button">
+							<button
+								onClick={handleClose}
+								className={css.close}
+								type="button"
+								data-jsx="event"
+							>
 								<img src={closeIcon} alt="ícone do botão para fechar o menu" />
 							</button>
 						</div>