Tem o espaço em brando que deveria a imagem completar. Linha em vermelho
Igual esta do trator:
html
<div id="root">
<div class="app">
<app-header
[fixed]="true"
[navbarBrand]="{
src: 'assets/img/openeen_branco.png'
}"
[sidebarToggler]="false"
[asideMenuToggler]="false"
[mobileAsideMenuToggler]="false"
>
<h1></h1>
<nav>
<ul>
<li style="padding-top: 40px">
<span style="cursor: pointer; padding-right: 40px">REWARDS</span>
<span style="cursor: pointer; padding-right: 40px"
>BIBLIOTECA
</span>
<span style="cursor: pointer; padding-right: 40px"
>OPENEEM QUIZ</span
>
<span style="cursor: pointer; padding-right: 40px">SOBRE </span>
<img
style="cursor: pointer; padding-bottom: 10px"
src="../../../assets/img/minhaConta.png"
/>
</li>
</ul>
</nav>
</app-header>
<div class="natureza">
<div class="content-natureza">
<div class="left">
<img
style="padding-top: 200px"
src="../../../assets/img/cuidadoNatureza.png"
/>
<div
style="
padding: 15px 0px 0px 0px;
font-family: Gotham;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 150%;
letter-spacing: 0.04em;
color: rgba(0, 0, 0, 0.66);
display: flex;
flex-direction: column;
width: 500px;
"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Amet, in
sed amet, metus enim massa accumsan id gravid massa cras
sollicitudin.
</div>
<img
style="cursor: pointer; padding: 20px 0px 0px 0px"
src="../../../assets/img/saberMais.png"
/>
<br />
<img
style="margin: 130px 0px 39px 0px"
src="../../../assets/img/bolas.png"
/>
<img
style="margin: 130px 0px 39px 30px"
src="../../../assets/img/seta.png"
/>
</div>
<div class="right">
<div class="wrapper">
<img class="bg-image-trator" />
</div>
</div>
</div>
</div>
<div style="background-color: #fbf4ea">
<div
style="
font-family: Gotham;
font-size: 42px;
line-height: 49px;
text-align: center;
letter-spacing: 0.05em;
color: #a9abad;
padding-top: 30px;
font-weight: bold;
"
>
OPENEEM REWARDS
</div>
<div
style="
font-family: Gotham;
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 150%;
text-align: center;
color: #cc6939;
padding-top: 30px;
font-weight: bold;
"
>
Juntar pontos é fácil, trocar por prêmios é mais fácil ainda...
</div>
</div>
<div
class="natureza"
style="background-color: #fbf4ea; padding-bottom: 30px"
>
<div class="content-natureza">
<div class="left">
<img
style="margin: 50px 0px 0px 0px"
src="../../../assets/img/3Itens.png"
/>
<img
style="cursor: pointer; margin: 50px 0px 0px 0px"
src="../../../assets/img/comecarAgora.png"
/>
</div>
<div class="right">
<div class="wrapper">
<img
style="margin: 50px 0px 0px 0px"
src="../../../assets/img/pessoas.png"
/>
</div>
</div>
</div>
</div>
<div class="natureza">
<div class="content-natureza">
<div class="left">
<img
style="margin: 50px 0px 0px 0px"
src="../../../assets/img/celularOpeneemBioscience.png"
/>
<div>
<img
style="margin: -600px 0px 0px 150px"
src="../../../assets/img/logoCelular.png"
/>
</div>
<img
style="margin: -830px 0px 0px 370px"
src="../../../assets/img/bibliotecaVirtual.png"
/>
<div
style="
font-family: Gotham;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 130%;
letter-spacing: 0.05em;
color: #404042;
margin: -350px 0px 0px 380px;
font-weight: bold;
"
>
Conteúdo exclusivo para ajudar você na hora das vendas.
</div>
<img
style="margin: 10px 0px 0px 360px"
src="../../../assets/img/remedio.png"
/>
<img
style="cursor: pointer; margin: 30px 0px 0px 500px"
src="../../../assets/img/bibliotecaVerde.png"
/>
</div>
<div class="right">
<div class="wrapper">
<img class="bg-image-minutos-sabedoria" />
<div style="margin: 0px 0px 0px 0px">
<img src="../../../assets/img/minutoSabedoria.png" />
</div>
<div style="z-index: 1; margin: -460px 0px 0px 150px">
<img src="../../../assets/img/minutoSabedoriaMarron.png" />
</div>
<div
style="
font-family: Gotham;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 130%;
letter-spacing: 0.05em;
color: #282828;
font-weight: bold;
margin: -360px 0px 0px 150px;
"
>
Teste seus conhecimentos e receba prêmios de acordo com o seu
desempenho.
</div>
<div
style="cursor: pointer; z-index: 1; margin: -300px 0px 0px 150px"
>
<img src="../../../assets/img/acesseGanhe.png" />
</div>
</div>
</div>
</div>
</div>
<app-footer>
<div class="container">
<div class="row">
<div class="col">
TODOS DIREITOS RESERVADOS. OPENEEM @{{ getDate() }}
</div>
<div class="col" style="text-align: center">OPENEEM.LIFE SOCIAL</div>
<div
class="col"
style="text-align: right; float: right; margin-right: -200px"
>
(11) 3666-1510 / (11) 998800-1049
</div>
</div>
</div>
</app-footer>
</div>
</div>
css
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
#root {
display: flex;
justify-content: center;
width: 100%;
height: 100%;
}
.app {
display: flex;
//min-height: 100vh;
width: 100%;
flex-direction: column;
position: relative;
}
header {
width: 100% !important;
height: 80px !important;
//bottom: 0 !important;
//left: 0 !important;
//line-height: 40px !important;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto;
padding: 0 20em;
background-image: linear-gradient(to right, #cc892a, #aead0d, #738619);
}
app-header ul {
list-style-type: none;
}
app-header h1 {
color: #fff;
}
app-header ul li {
text-decoration: none;
font-weight: 500;
padding: 10px;
margin-left: 10px;
font-family: Gotham;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 11px;
text-align: right;
color: #fbf4ea;
}
.natureza {
width: 100%;
//height: 100vh;
display: flex;
justify-content: center;
//padding: 2em;
padding-top: 0em;
}
.content-natureza {
color: #fff;
max-width: 1440px;
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
align-items: center;
margin-left: auto;
margin-right: auto;
}
.content-natureza .left {
width: 50%;
}
.content-natureza .left button {
border-radius: 50px;
padding: 10px;
margin-top: 15px;
background: #cc6939;
height: 48px;
padding: 0 2em;
cursor: pointer;
outline: 0;
border: 0;
}
.content-natureza .right {
display: flex;
flex-wrap: wrap;
width: 40%;
}
.content-natureza .right .wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
list-style-type: none;
}
.content-natureza .right .wrapper .row {
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
margin: 5px;
width: 100%;
}
.bg-image-trator {
position: absolute;
top: 0;
background-image: url("/assets/img/trator.png");
//background-repeat: no-repeat;
background-size: cover;
z-index: -1;
width: 46.27%;
height: 663px;
}
.bg-image-minutos-sabedoria {
position: absolute;
top: 0;
background-image: url("/assets/img/trator.png");
//background-repeat: no-repeat;
background-size: cover;
z-index: -1;
width: 46.27%;
height: 663px;
}
Alguma sugestão ?