Galera, alguem pode me ajudar? Estou tentando deixar igual a pagina do projeto, no 7 days of code de html e css, mas quando eu pego o width da sessão que tem as métricas e coloco no CSS ele fica cortado, se eu tiro o width ele aparece todas as métricas mas fica num tamanho pequeno e fica muito diferente do projeto do figma. Outra coisa, quando vou no inspecionar, o tamanho nao fica igual ao do projeto também, desconfigura o design, gostaria de saber o porque, mesmo em tamanho tela.
Segue o codigo
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Optimus Tech</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500;600&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="header">
<div>
<img class="logo" src="./img/logo optimus.png" alt="logo">
</div>
<nav class="menu">
<a class="item__menu" href="#">Home</a>
<a class="item__menu" href="#">Produtos</a>
<a class="item__menu" href="#">Recursos</a>
<a class="item__menu" href="#">Sobre Nós</a>
</nav>
<nav class="botoes">
<a class="botao__1" href="#">Entrar</a>
<a class="botao__2" href="#">Cadastrar</a>
</nav>
</div>
</header>
<main class="primeira__sessao">
<section class="container">
<p class="texto__titulo"><strong>Sobre nós</strong></p>
<h1 class="titulo__1sessao">Por que somos diferentes?</h1>
<p class="texto__1sessao">Nós focamos nos detalhes de tudo que fazemos. Tudo para ajudar as empresas de todo o mundo a se concentrarem naquilo que é realmente importante para elas.</p>
</section>
<section class="metricas">
<div class="INmetricas">
<h1>400+</h1>
<h2>Projetos concluidos</h2>
<p>Nós ajudamos a construir mais de 400 projetos incríveis</p>
</div>
<div class="INmetricas">
<h1>100+</h1>
<h2>Colaboradores</h2>
<p>Temos mais de 100 colaboradores no nosso time que se preocupam com nossos clientes.</p>
</div>
<div class="INmetricas">
<h1>20k</h1>
<h2>Downloads</h2>
<p>Nossos projetos que estão disponíveis em lojas já foram baixados mais de 20.000 vezes.</p>
</div>
<div class="INmetricas">
<h1>500+</h1>
<h2>Reviews de 5 estrelas</h2>
<p>Estamos orgulhosos de contar com mais de 500 reviews 5 estrelas em nossos produtos.</p>
</div>
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 45px;
}
.header {
width: 100%;
height: 45px;
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
margin: 2em;
}
.logo {
margin-left: 80px;
width: 100%;
}
.menu {
display: flex;
font-size: 28px;
font-family: 'Inter' , sans-serif;
font-weight: 500;
gap: 32px;
margin-right: 619px;
}
.item__menu {
text-decoration: none;
color: #667085;
}
.botoes {
margin-right: 112px;
color: #667085;
text-decoration: none;
}
.botao__1 {
font-size: 28px;
font-family: 'Inter' , sans-serif;
color: #667085;
border: 1px solid #FFFFFF;
border-radius: 8px;
text-decoration: none;
margin-right: 1em;
}
.botao__2 {
color: #FFFFFF;
font-size: 28px;
font-family: 'Inter' , sans-serif;
border-radius: 8px;
border: 1px solid #8E2424;
background: #8E2424;
margin-bottom: 0;
padding: 10px 18px;
text-decoration: none;
}
.container {
margin-top: 96px;
}
.primeira__sessao {
display: block;
text-align: center;
overflow: hidden;
width: 791px;
margin-left: 55em;
}
.texto__titulo {
font-size: 28px;
font-family: 'Inter' , sans-serif;
font-weight: 600;
margin-bottom: 24px;
color:#8E2424
}
.titulo__1sessao {
font-size: 48px;
font-weight: 600;
font-family: 'Inter' , sans-serif;
margin-bottom: 36px;
}
.texto__1sessao {
font-size: 20px;
font-weight: 400;
font-family: 'Inter' , sans-serif;
color: #667085;
margin-bottom: 96px;
}
.metricas {
display: flex;
flex-direction: row;
gap: 40px;
width: 1280px;
}
