如何将 header 拉伸到容器的整个宽度？
How to stretch the header to the full width of the container?
项目 link:https://plupiks.github.io/Real-Estate-LandingPage/
有一个header是绝对定位的。有一件事，它不会伸展到容器的整个宽度。我使用 gap 设置了缩进。你有解决这个问题的方法吗？我设置了 margin-right: auto 但由于某些原因它不起作用。
使用过 SCSS。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<title>Real Estate Landing Page</title>
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="container">
<nav class="header--nav nav">
<div class="logo">
<svg width="107" height="24" viewBox="0 0 107 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 23.6163V0.767435H6.99415C12.0513 0.767435 14.5798 2.74418 14.5798 6.69767C14.5798 7.97674 14.2551 9.08139 13.6055 10.0116C12.956 10.9419 12.0745 11.5232 10.961 11.7558C12.2601 11.9419 13.2692 12.5116 13.9883 13.4651C14.7306 14.3953 15.1134 15.6163 15.1366 17.1279C15.1366 21.4535 12.318 23.6163 6.68098 23.6163H0ZM7.20293 20.4767C8.73398 20.4767 9.82428 20.1395 10.4738 19.4651C11.1234 18.7907 11.4481 17.8953 11.4481 16.7791C11.4481 15.6395 11.0886 14.8139 10.3694 14.3023C9.6735 13.7907 8.56 13.5349 7.02894 13.5349H3.61886V20.4767H7.20293ZM11.0306 6.97674C11.0306 4.93023 9.76629 3.90697 7.23772 3.90697H3.61886V10.3953H6.95935C9.6735 10.3953 11.0306 9.25581 11.0306 6.97674Z"
fill="#000228"
/>
<path
d="M17.5376 15.3488C17.5376 12.5349 18.1639 10.407 19.4166 8.96511C20.6693 7.49999 22.4091 6.76744 24.6361 6.76744C26.8631 6.76744 28.5797 7.43022 29.786 8.75581C31.0155 10.0581 31.6534 11.9767 31.6998 14.5116L31.5607 17.093H21.4C21.6088 19.6046 22.8615 20.8605 25.158 20.8605C26.7587 20.8605 28.4521 20.5698 30.2384 19.9884L30.9691 23.0232C30.2268 23.2791 29.2641 23.5 28.081 23.686C26.8979 23.8953 25.9236 24 25.158 24C20.0777 24 17.5376 21.1163 17.5376 15.3488ZM24.7753 10.0116C23.685 10.0116 22.8615 10.3372 22.3047 10.9884C21.7712 11.6163 21.4696 12.6744 21.4 14.1628H27.8374C27.8374 11.3953 26.8167 10.0116 24.7753 10.0116Z"
fill="#000228"
/>
<path
d="M34.0312 22.8488L34.7967 19.6744C37.0005 20.3721 38.752 20.7209 40.0511 20.7209C41.3501 20.7209 42.2317 20.593 42.6956 20.3372C43.1596 20.1046 43.3915 19.686 43.3915 19.0814C43.3915 18.4767 43.1828 18.0465 42.7652 17.7907C42.3476 17.5349 41.5589 17.2674 40.399 16.9884C38.1024 16.4302 36.5018 15.8139 35.5971 15.1395C34.6924 14.4419 34.24 13.3139 34.24 11.7558C34.24 8.43023 36.3742 6.76744 40.6426 6.76744C42.4752 6.76744 44.5978 7.06976 47.0104 7.67441L46.3493 10.9884C44.0527 10.3372 42.2781 10.0116 41.0254 10.0116C39.7727 10.0116 38.926 10.1279 38.4852 10.3605C38.0676 10.5698 37.8589 10.9419 37.8589 11.4767C37.8589 12.0116 38.0676 12.407 38.4852 12.6628C38.926 12.8953 40.0395 13.2558 41.8257 13.7442C43.6119 14.2325 44.9226 14.8023 45.7577 15.4535C46.5928 16.0814 47.0104 17.1628 47.0104 18.6977C47.0104 22.2093 44.853 23.9651 40.5382 23.9651C38.52 23.9651 36.351 23.593 34.0312 22.8488Z"
fill="#000228"
/>
<path
d="M53.2738 7.0465L53.3434 8.05813C55.2224 7.19767 56.6955 6.76744 57.7626 6.76744C59.6416 6.76744 61.0219 7.32557 61.9034 8.44185C62.8081 9.53488 63.2605 11.2558 63.2605 13.6046V23.6163H59.6764V13.7093C59.6764 12.593 59.4792 11.7209 59.0849 11.093C58.6905 10.4651 58.0758 10.1512 57.2407 10.1512C56.4055 10.1512 55.1181 10.5581 53.3782 11.3721V23.6163H49.7941V7.0465H53.2738Z"
fill="#000228"
/>
<path
d="M65.9746 23.6163V20.407H71.1593V10.2558H66.253V7.0465H74.7434V20.407H79.6498V23.6163H65.9746ZM72.76 4.63953C72.0641 4.63953 71.5073 4.43022 71.0898 4.01162C70.6954 3.56976 70.4982 2.99999 70.4982 2.30232C70.4982 1.60464 70.707 1.0465 71.1246 0.6279C71.5421 0.209295 72.0989 -7.62939e-06 72.7948 -7.62939e-06C73.5139 -7.62939e-06 74.0591 0.209295 74.4302 0.6279C74.8246 1.02325 75.0218 1.58139 75.0218 2.30232C75.0218 3.02325 74.8246 3.59302 74.4302 4.01162C74.0359 4.43022 73.4791 4.63953 72.76 4.63953Z"
fill="#000228"
/>
<path
d="M82.5379 23.6163V0.418598H86.122V13.7093L88.4185 13.4651C89.7176 11.7907 90.8543 9.97674 91.8286 8.02325L92.3158 7.0465H96.213C94.7515 10.1395 93.1277 12.7209 91.3415 14.7907C92.8261 16.907 94.3224 19.407 95.8302 22.2907L96.5262 23.6163H92.455C91.3183 21.1512 90.0192 18.7907 88.5577 16.5349L86.122 16.7791V23.6163H82.5379Z"
fill="#000228"
/>
<path d="M101.954 23.6163V18.5581H107V23.6163H101.954Z" fill="#000228" />
</svg>
</div>
<ul class="nav--list">
<li class="nav--item"><a href="#" class="nav--link">Home</a></li>
<li class="nav--item"><a href="#" class="nav--link">Fratures</a></li>
<li class="nav--item"><a href="#" class="nav--link">Service</a></li>
<li class="nav--item"><a href="#" class="nav--link">Listed</a></li>
<li class="nav--item"><a href="#" class="nav--link">Contact</a></li>
</ul>
<div class="nav--buttons">
<button class="button nav--button sign-up">Sign up</button>
<button class="button nav--button">Register</button>
</div>
</nav>
<div class="header--inf-block">
<div class="header--blok-left">
<div class="header--descr">Welcome to Besnik Agency</div>
<h1 class="header--title">Discover a place you’ll love to live.</h1>
<p class="header--subtitle">
Get the best real estate deals first, before they hit the mass market! hot foreclosure deals with one simple search
</p>
<button class="button header--button">More About Us</button>
</div>
<div class="header--block-right">
<div class="header--img">
<svg width="584" height="620" viewBox="0 0 584 620" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M241.032 610.998L231.713 201.367L58.0327 201.367L60.5743 610.998H241.032Z" fill="#F1F6FF" />
<path d="M302.879 608.881V337.77L512.566 343.89V608.881H302.879Z" fill="#FEFCED" />
<path d="M58.033 201.367L60.5747 610.998H159.276L154.616 201.367H58.033Z" fill="#7398F7" />
<path d="M182.997 159.855H110.983V201.369H182.997V159.855Z" fill="#1F1D42" />
<path d="M110.983 159.855V201.369H159.698C136.315 196.285 129.057 171.575 128.351 159.855H110.983Z" fill="#1F1717" />
<path
d="M152.498 89.1111L144.026 88.2639C141.908 87.4167 141.484 77.6737 149.533 79.7917C155.971 81.4861 154.192 86.7107 152.498 89.1111Z"
fill="#0E173D"
/>
<path d="M152.498 89.112L144.026 88.2648V100.549L152.498 101.397V89.112Z" fill="#0E173D" />
<path d="M144.025 100.548L152.497 101.396L183.845 123.847H110.56L144.025 100.548Z" fill="#1F1D42" />
<path d="M323.636 403.007H316.859V451.298H313.893V456.381H326.602V449.604H323.636V403.007Z" fill="#1B2A63" />
<path d="M512.566 612.269H302.879V473.325L512.566 476.385V612.269Z" fill="#A3BDFF" />
<path d="M448.177 242.458L221.546 235.257L302.879 337.77L520.614 344.124L448.177 242.458Z" fill="#063183" />
<path d="M302.879 337.77L520.614 344.124L316.011 238.258L221.546 235.257L302.879 337.77Z" fill="#7087FB" />
<path
d="M221.546 235.257L302.879 337.77V605.915L152.921 613.117V476.291V337.77L193.164 284.819H184.268L221.546 235.257Z"
fill="#CFDEF3"
/>
<path d="M250.776 297.527H206.297V350.902H250.776V297.527Z" fill="#0C183F" />
<rect x="211.38" y="303.033" width="15.2499" height="18.6388" fill="#1F326B" />
<rect x="232.56" y="303.033" width="15.2499" height="18.6388" fill="#1F326B" />
<rect x="232.56" y="328.451" width="15.2499" height="18.6388" fill="#1F326B" />
<path d="M110.562 123.846H183.846H188.929V125.964H104.631V123.846H110.562Z" stroke="black" />
<path d="M150.804 378.012H303.727H512.99" stroke="black" stroke-width="4" />
<path d="M151.652 486.457H301.186H511.297" stroke="black" stroke-width="5" />
<path d="M151.652 486.457H301.186" stroke="#5267FA" stroke-width="6" />
<rect x="211.38" y="328.451" width="15.2499" height="18.6388" fill="#1F326B" />
<path d="M113.525 289.901H91.0741V350.901H115.22L113.525 289.901Z" fill="#0E173D" />
<path d="M113.525 395.381H91.0741V456.381H115.22L113.525 395.381Z" fill="#0C193F" />
<path d="M114.797 267.027H91.9224V220.43C97.3446 205.18 106.325 214.076 110.138 220.43L114.797 267.027Z" fill="#1F1D42" />
<path
d="M352.019 247.118H327.873L306.693 240.763V201.368V199.25L327.873 198.677L353.714 197.979L353.597 201.368L352.019 247.118Z"
fill="#1F326B"
/>
<path d="M352.019 247.118H327.874V201.368V198.677L353.714 197.979L353.597 201.368L352.019 247.118Z" fill="#FEFDE8" />
<path d="M306.693 199.25L327.873 198.677L353.714 197.979L353.597 201.368H327.873H306.693V199.25Z" fill="#112F7F" />
<rect x="180.881" y="125.966" width="1.69444" height="33.8888" fill="#0C1942" />
<rect x="241.032" y="166.632" width="1.69444" height="189.777" transform="rotate(90 241.032 166.632)" fill="#0C1942" />
<rect x="241.032" y="199.673" width="1.69444" height="189.777" transform="rotate(90 241.032 199.673)" fill="#0C1942" />
<path d="M58.0009 231.867H155.855H232.501" stroke="#18265D" stroke-width="4" />
<rect x="241.032" y="186.118" width="1.69444" height="189.777" transform="rotate(90 241.032 186.118)" fill="#081334" />
<rect x="110.56" y="125.966" width="1.69444" height="33.8888" fill="#132355" />
<rect x="128.352" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
<rect x="131.741" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
<rect x="136.824" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
<path
d="M221.546 235.257L227.259 244.153M302.879 337.77L296.72 330.145M227.259 244.153L453.308 249.66M227.259 244.153L237.524 256.861M237.524 256.861L462.061 261.944M237.524 256.861L248.816 270.84M248.816 270.84L470.813 274.229M248.816 270.84L257.976 282.18M257.976 282.18L479.566 286.514M257.976 282.18L269.004 295.833M269.004 295.833L488.42 298.939M269.004 295.833L278.243 307.27M278.243 307.27L497.739 312.019M278.243 307.27L290.561 322.52M290.561 322.52H505.221M290.561 322.52L296.72 330.145M296.72 330.145L512.918 333.322"
stroke="#A3BDFF"
stroke-width="4"
/>
<rect x="83.4506" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="51.2557" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="239.338" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<path d="M377.436 511.026H363.88V579.651H377.436V511.026Z" fill="#0C183F" />
<path d="M363.88 579.651H377.436V545.339H363.88V579.651Z" fill="#17275F" />
<path d="M489.691 548.304H467.24V580.499H489.691V548.304Z" fill="#17275F" />
<path d="M148.687 79.7914L146.992 1" stroke="black" stroke-width="3" />
<rect x="210.534" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="151.227" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="77.5193" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="204.602" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="204.602" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="145.298" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="158.853" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
<rect x="162.241" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
<rect x="152.921" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
<path d="M467.24 580.499H489.691V564.402H467.24V580.499Z" fill="#0F1C49" />
<path d="M503.67 556.353H495.198V574.145L503.67 573.721V556.353Z" fill="#FAF2E2" />
<path
d="M200.365 511.449V548.727H204.601V604.643H211.803V546.185H207.143V517.803H248.657V546.185H241.879V604.643H246.115V548.727H254.164V511.449H200.365Z"
fill="#0D0808"
/>
<path d="M241.881 546.186V604.644H211.805V546.186H207.145V517.804H248.659V546.186H241.881Z" fill="#17275F" />
<path d="M584 611.421H0V620H584V611.421Z" fill="#091D39" />
<path
d="M571.873 611.422V576.686M510.026 576.686V611.422M446.485 576.686V611.422M385.909 576.686V611.422M323.214 576.686V611.422M259.249 576.686V611.422M201.638 576.686V611.422M136.826 576.686V611.422M74.132 576.686V611.422M14.4031 576.686V611.422"
stroke="black"
stroke-width="4"
/>
<path
d="M571.873 582C558.6 593.579 527.648 609.789 510.026 582C495.623 590.755 462.751 602.78 446.485 581.769C433.776 590.241 403.869 603.288 385.908 587.699C373.341 593.489 343.209 601.594 323.214 587.699C305.705 591.371 268.399 596.511 259.249 587.699C247.388 591.371 219.26 596.511 201.638 587.699C184.553 591.371 147.67 596.511 136.826 587.699C118.752 593.912 89.8057 602.102 74.1318 587.699C57.0807 591.371 23.3695 597.311 13.5004 588.5"
stroke="black"
stroke-width="3"
/>
<circle cx="571.965" cy="574.965" r="2.96527" fill="#06162A" />
<circle cx="510.026" cy="574.568" r="2.96527" fill="#06162A" />
<circle cx="446.484" cy="575.416" r="2.96527" fill="#06162A" />
<circle cx="385.965" cy="574.965" r="2.96527" fill="#06162A" />
<circle cx="322.965" cy="574.965" r="2.96527" fill="#06162A" />
<circle cx="259.249" cy="575.416" r="2.96527" fill="#06162A" />
<circle cx="201.638" cy="574.568" r="2.96527" fill="#06162A" />
<circle cx="136.965" cy="574.568" r="2.96527" fill="#06162A" />
<circle cx="73.9653" cy="576.262" r="2.96527" fill="#06162A" />
<circle cx="13.9653" cy="577.965" r="2.96527" fill="#06162A" />
<path d="M56.7639 45.479L69.4722 56.4928L82.1805 45.479" stroke="black" stroke-width="4" />
<path d="M8.47162 38.7016L21.1799 49.7154L33.8882 38.7016" stroke="black" stroke-width="4" />
<path d="M63.5413 16.675L76.2496 27.6889L88.9579 16.675" stroke="black" stroke-width="4" />
<path d="M133.014 20.9098L145.722 31.9236L158.431 20.9098" stroke="black" stroke-width="4" />
<path d="M255.86 390.298H210.11L211.805 458.076H255.86V390.298Z" fill="#0F1F4C" />
<path d="M244.847 401.736H221.125V446.638H244.847V401.736Z" fill="#142553" />
</svg>
</div>
</div>
</div>
</div>
</header>
</div>
</body>
</html>
@font-face {
font-family: 'Poppins';
src: url("../fonts/Poppins-Regular.ttf"); }
@font-face {
font-family: 'Poppins';
src: url("../fonts/Poppins-Medium.ttf"); }
@font-face {
font-family: 'Poppins';
src: url("../fonts/Poppins-SemiBold.ttf"); }
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none; }
body {
font-family: Poppins;
font-size: 1rem;
font-weight: 400;
color: #5a6473;
line-height: 1; }
button {
border: none; }
.container {
max-width: 1140px;
margin: 0 auto;
padding: 0 15px; }
.header {
position: relative;
background-color: #e6f0ff;
font-size: 16px; }
.header--nav {
position: absolute;
display: flex;
padding: 2.375em 0;
column-gap: 4.03125em;
align-items: center; }
.logo {
cursor: pointer;
transition: all 0.2s ease-in-out; }
.logo:hover {
transform: scale(105%); }
.nav--list {
display: flex;
margin-right: auto;
column-gap: 1.875em; }
.nav--link {
display: block;
position: relative;
font-size: 0.875em;
font-weight: 500;
color: #5a6473;
line-height: 1.3125;
text-decoration: none;
transition: all 0.2s ease-in-out; }
.nav--link:visited {
color: #5a6473; }
.nav--link::after {
display: block;
pointer-events: none;
position: absolute;
bottom: -0.7143em;
left: 0;
content: '';
width: 100%;
height: 0.143em;
background-color: #7f8a9b;
opacity: 0;
border-radius: 0.3571em;
transition: all 0.2s ease-in; }
.nav--link:hover {
color: #2d323a;
transform: scaleX(105%); }
.nav--link:hover::after {
bottom: -0.2143em;
opacity: 1; }
.nav--link:active {
color: #717d8f; }
.nav--buttons {
display: flex;
column-gap: 1.125em; }
.button {
font-family: Poppins;
cursor: pointer;
padding: 0.7143em 1.43em;
border-radius: 0.57143em;
font-size: 0.875em;
font-weight: 500;
color: white;
line-height: 1.3125;
background-color: #0f1b4c;
transition: all 0.2s ease-in-out; }
.button:hover:not(.sign-up) {
background-color: #1c328c;
transform: scale(105%);
border-radius: 0.7143em; }
.sign-up {
background-color: transparent;
padding: 0;
color: #0f1b4c;
transition: all 0.2s ease-in-out; }
.sign-up:hover {
color: #1c328c;
transform: scale(110%); }
.header--inf-block {
display: flex;
column-gap: 4.1875em;
padding-top: 7.125em; }
.header--blok-left {
flex: 0 0 50.37%;
margin-top: 5.6875em; }
.header--descr {
margin-bottom: 0.444em;
font-size: 1.125em;
font-weight: 500;
color: #687691;
line-height: 1.6875; }
.header--title {
margin-bottom: 0.46875em;
font-size: 4em;
font-weight: 700;
color: #000336;
line-height: 1.1875; }
.header--subtitle {
font-size: 1.125em;
font-weight: 400;
color: #5a6473;
line-height: 2;
margin-bottom: 2.222em; }
从 class“.header--nav”中删除 position:absolute。同时删除“padding-top: 7.125em;”来自“.header--inf-block”。这应该可以解决问题。
@font-face {
font-family: 'Poppins';
src: url("../fonts/Poppins-Regular.ttf"); }
@font-face {
font-family: 'Poppins';
src: url("../fonts/Poppins-Medium.ttf"); }
@font-face {
font-family: 'Poppins';
src: url("../fonts/Poppins-SemiBold.ttf"); }
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none; }
body {
font-family: Poppins;
font-size: 1rem;
font-weight: 400;
color: #5a6473;
line-height: 1; }
button {
border: none; }
.container {
max-width: 1140px;
margin: 0 auto;
padding: 0 15px; }
.header {
position: relative;
background-color: #e6f0ff;
font-size: 16px; }
.header--nav {
display: flex;
padding: 2.375em 0;
column-gap: 4.03125em;
align-items: center; }
.logo {
cursor: pointer;
transition: all 0.2s ease-in-out; }
.logo:hover {
transform: scale(105%); }
.nav--list {
display: flex;
margin-right: auto;
column-gap: 1.875em; }
.nav--link {
display: block;
position: relative;
font-size: 0.875em;
font-weight: 500;
color: #5a6473;
line-height: 1.3125;
text-decoration: none;
transition: all 0.2s ease-in-out; }
.nav--link:visited {
color: #5a6473; }
.nav--link::after {
display: block;
pointer-events: none;
position: absolute;
bottom: -0.7143em;
left: 0;
content: '';
width: 100%;
height: 0.143em;
background-color: #7f8a9b;
opacity: 0;
border-radius: 0.3571em;
transition: all 0.2s ease-in; }
.nav--link:hover {
color: #2d323a;
transform: scaleX(105%); }
.nav--link:hover::after {
bottom: -0.2143em;
opacity: 1; }
.nav--link:active {
color: #717d8f; }
.nav--buttons {
display: flex;
column-gap: 1.125em; }
.button {
font-family: Poppins;
cursor: pointer;
padding: 0.7143em 1.43em;
border-radius: 0.57143em;
font-size: 0.875em;
font-weight: 500;
color: white;
line-height: 1.3125;
background-color: #0f1b4c;
transition: all 0.2s ease-in-out; }
.button:hover:not(.sign-up) {
background-color: #1c328c;
transform: scale(105%);
border-radius: 0.7143em; }
.sign-up {
background-color: transparent;
padding: 0;
color: #0f1b4c;
transition: all 0.2s ease-in-out; }
.sign-up:hover {
color: #1c328c;
transform: scale(110%); }
.header--inf-block {
display: flex;
column-gap: 4.1875em;}
.header--blok-left {
flex: 0 0 50.37%;
margin-top: 5.6875em; }
.header--descr {
margin-bottom: 0.444em;
font-size: 1.125em;
font-weight: 500;
color: #687691;
line-height: 1.6875; }
.header--title {
margin-bottom: 0.46875em;
font-size: 4em;
font-weight: 700;
color: #000336;
line-height: 1.1875; }
.header--subtitle {
font-size: 1.125em;
font-weight: 400;
color: #5a6473;
line-height: 2;
margin-bottom: 2.222em; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<title>Real Estate Landing Page</title>
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="container">
<nav class="header--nav nav">
<div class="logo">
<svg width="107" height="24" viewBox="0 0 107 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 23.6163V0.767435H6.99415C12.0513 0.767435 14.5798 2.74418 14.5798 6.69767C14.5798 7.97674 14.2551 9.08139 13.6055 10.0116C12.956 10.9419 12.0745 11.5232 10.961 11.7558C12.2601 11.9419 13.2692 12.5116 13.9883 13.4651C14.7306 14.3953 15.1134 15.6163 15.1366 17.1279C15.1366 21.4535 12.318 23.6163 6.68098 23.6163H0ZM7.20293 20.4767C8.73398 20.4767 9.82428 20.1395 10.4738 19.4651C11.1234 18.7907 11.4481 17.8953 11.4481 16.7791C11.4481 15.6395 11.0886 14.8139 10.3694 14.3023C9.6735 13.7907 8.56 13.5349 7.02894 13.5349H3.61886V20.4767H7.20293ZM11.0306 6.97674C11.0306 4.93023 9.76629 3.90697 7.23772 3.90697H3.61886V10.3953H6.95935C9.6735 10.3953 11.0306 9.25581 11.0306 6.97674Z"
fill="#000228"
/>
<path
d="M17.5376 15.3488C17.5376 12.5349 18.1639 10.407 19.4166 8.96511C20.6693 7.49999 22.4091 6.76744 24.6361 6.76744C26.8631 6.76744 28.5797 7.43022 29.786 8.75581C31.0155 10.0581 31.6534 11.9767 31.6998 14.5116L31.5607 17.093H21.4C21.6088 19.6046 22.8615 20.8605 25.158 20.8605C26.7587 20.8605 28.4521 20.5698 30.2384 19.9884L30.9691 23.0232C30.2268 23.2791 29.2641 23.5 28.081 23.686C26.8979 23.8953 25.9236 24 25.158 24C20.0777 24 17.5376 21.1163 17.5376 15.3488ZM24.7753 10.0116C23.685 10.0116 22.8615 10.3372 22.3047 10.9884C21.7712 11.6163 21.4696 12.6744 21.4 14.1628H27.8374C27.8374 11.3953 26.8167 10.0116 24.7753 10.0116Z"
fill="#000228"
/>
<path
d="M34.0312 22.8488L34.7967 19.6744C37.0005 20.3721 38.752 20.7209 40.0511 20.7209C41.3501 20.7209 42.2317 20.593 42.6956 20.3372C43.1596 20.1046 43.3915 19.686 43.3915 19.0814C43.3915 18.4767 43.1828 18.0465 42.7652 17.7907C42.3476 17.5349 41.5589 17.2674 40.399 16.9884C38.1024 16.4302 36.5018 15.8139 35.5971 15.1395C34.6924 14.4419 34.24 13.3139 34.24 11.7558C34.24 8.43023 36.3742 6.76744 40.6426 6.76744C42.4752 6.76744 44.5978 7.06976 47.0104 7.67441L46.3493 10.9884C44.0527 10.3372 42.2781 10.0116 41.0254 10.0116C39.7727 10.0116 38.926 10.1279 38.4852 10.3605C38.0676 10.5698 37.8589 10.9419 37.8589 11.4767C37.8589 12.0116 38.0676 12.407 38.4852 12.6628C38.926 12.8953 40.0395 13.2558 41.8257 13.7442C43.6119 14.2325 44.9226 14.8023 45.7577 15.4535C46.5928 16.0814 47.0104 17.1628 47.0104 18.6977C47.0104 22.2093 44.853 23.9651 40.5382 23.9651C38.52 23.9651 36.351 23.593 34.0312 22.8488Z"
fill="#000228"
/>
<path
d="M53.2738 7.0465L53.3434 8.05813C55.2224 7.19767 56.6955 6.76744 57.7626 6.76744C59.6416 6.76744 61.0219 7.32557 61.9034 8.44185C62.8081 9.53488 63.2605 11.2558 63.2605 13.6046V23.6163H59.6764V13.7093C59.6764 12.593 59.4792 11.7209 59.0849 11.093C58.6905 10.4651 58.0758 10.1512 57.2407 10.1512C56.4055 10.1512 55.1181 10.5581 53.3782 11.3721V23.6163H49.7941V7.0465H53.2738Z"
fill="#000228"
/>
<path
d="M65.9746 23.6163V20.407H71.1593V10.2558H66.253V7.0465H74.7434V20.407H79.6498V23.6163H65.9746ZM72.76 4.63953C72.0641 4.63953 71.5073 4.43022 71.0898 4.01162C70.6954 3.56976 70.4982 2.99999 70.4982 2.30232C70.4982 1.60464 70.707 1.0465 71.1246 0.6279C71.5421 0.209295 72.0989 -7.62939e-06 72.7948 -7.62939e-06C73.5139 -7.62939e-06 74.0591 0.209295 74.4302 0.6279C74.8246 1.02325 75.0218 1.58139 75.0218 2.30232C75.0218 3.02325 74.8246 3.59302 74.4302 4.01162C74.0359 4.43022 73.4791 4.63953 72.76 4.63953Z"
fill="#000228"
/>
<path
d="M82.5379 23.6163V0.418598H86.122V13.7093L88.4185 13.4651C89.7176 11.7907 90.8543 9.97674 91.8286 8.02325L92.3158 7.0465H96.213C94.7515 10.1395 93.1277 12.7209 91.3415 14.7907C92.8261 16.907 94.3224 19.407 95.8302 22.2907L96.5262 23.6163H92.455C91.3183 21.1512 90.0192 18.7907 88.5577 16.5349L86.122 16.7791V23.6163H82.5379Z"
fill="#000228"
/>
<path d="M101.954 23.6163V18.5581H107V23.6163H101.954Z" fill="#000228" />
</svg>
</div>
<ul class="nav--list">
<li class="nav--item"><a href="#" class="nav--link">Home</a></li>
<li class="nav--item"><a href="#" class="nav--link">Fratures</a></li>
<li class="nav--item"><a href="#" class="nav--link">Service</a></li>
<li class="nav--item"><a href="#" class="nav--link">Listed</a></li>
<li class="nav--item"><a href="#" class="nav--link">Contact</a></li>
</ul>
<div class="nav--buttons">
<button class="button nav--button sign-up">Sign up</button>
<button class="button nav--button">Register</button>
</div>
</nav>
<div class="header--inf-block">
<div class="header--blok-left">
<div class="header--descr">Welcome to Besnik Agency</div>
<h1 class="header--title">Discover a place you’ll love to live.</h1>
<p class="header--subtitle">
Get the best real estate deals first, before they hit the mass market! hot foreclosure deals with one simple search
</p>
<button class="button header--button">More About Us</button>
</div>
<div class="header--block-right">
<div class="header--img">
<svg width="584" height="620" viewBox="0 0 584 620" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M241.032 610.998L231.713 201.367L58.0327 201.367L60.5743 610.998H241.032Z" fill="#F1F6FF" />
<path d="M302.879 608.881V337.77L512.566 343.89V608.881H302.879Z" fill="#FEFCED" />
<path d="M58.033 201.367L60.5747 610.998H159.276L154.616 201.367H58.033Z" fill="#7398F7" />
<path d="M182.997 159.855H110.983V201.369H182.997V159.855Z" fill="#1F1D42" />
<path d="M110.983 159.855V201.369H159.698C136.315 196.285 129.057 171.575 128.351 159.855H110.983Z" fill="#1F1717" />
<path
d="M152.498 89.1111L144.026 88.2639C141.908 87.4167 141.484 77.6737 149.533 79.7917C155.971 81.4861 154.192 86.7107 152.498 89.1111Z"
fill="#0E173D"
/>
<path d="M152.498 89.112L144.026 88.2648V100.549L152.498 101.397V89.112Z" fill="#0E173D" />
<path d="M144.025 100.548L152.497 101.396L183.845 123.847H110.56L144.025 100.548Z" fill="#1F1D42" />
<path d="M323.636 403.007H316.859V451.298H313.893V456.381H326.602V449.604H323.636V403.007Z" fill="#1B2A63" />
<path d="M512.566 612.269H302.879V473.325L512.566 476.385V612.269Z" fill="#A3BDFF" />
<path d="M448.177 242.458L221.546 235.257L302.879 337.77L520.614 344.124L448.177 242.458Z" fill="#063183" />
<path d="M302.879 337.77L520.614 344.124L316.011 238.258L221.546 235.257L302.879 337.77Z" fill="#7087FB" />
<path
d="M221.546 235.257L302.879 337.77V605.915L152.921 613.117V476.291V337.77L193.164 284.819H184.268L221.546 235.257Z"
fill="#CFDEF3"
/>
<path d="M250.776 297.527H206.297V350.902H250.776V297.527Z" fill="#0C183F" />
<rect x="211.38" y="303.033" width="15.2499" height="18.6388" fill="#1F326B" />
<rect x="232.56" y="303.033" width="15.2499" height="18.6388" fill="#1F326B" />
<rect x="232.56" y="328.451" width="15.2499" height="18.6388" fill="#1F326B" />
<path d="M110.562 123.846H183.846H188.929V125.964H104.631V123.846H110.562Z" stroke="black" />
<path d="M150.804 378.012H303.727H512.99" stroke="black" stroke-width="4" />
<path d="M151.652 486.457H301.186H511.297" stroke="black" stroke-width="5" />
<path d="M151.652 486.457H301.186" stroke="#5267FA" stroke-width="6" />
<rect x="211.38" y="328.451" width="15.2499" height="18.6388" fill="#1F326B" />
<path d="M113.525 289.901H91.0741V350.901H115.22L113.525 289.901Z" fill="#0E173D" />
<path d="M113.525 395.381H91.0741V456.381H115.22L113.525 395.381Z" fill="#0C193F" />
<path d="M114.797 267.027H91.9224V220.43C97.3446 205.18 106.325 214.076 110.138 220.43L114.797 267.027Z" fill="#1F1D42" />
<path
d="M352.019 247.118H327.873L306.693 240.763V201.368V199.25L327.873 198.677L353.714 197.979L353.597 201.368L352.019 247.118Z"
fill="#1F326B"
/>
<path d="M352.019 247.118H327.874V201.368V198.677L353.714 197.979L353.597 201.368L352.019 247.118Z" fill="#FEFDE8" />
<path d="M306.693 199.25L327.873 198.677L353.714 197.979L353.597 201.368H327.873H306.693V199.25Z" fill="#112F7F" />
<rect x="180.881" y="125.966" width="1.69444" height="33.8888" fill="#0C1942" />
<rect x="241.032" y="166.632" width="1.69444" height="189.777" transform="rotate(90 241.032 166.632)" fill="#0C1942" />
<rect x="241.032" y="199.673" width="1.69444" height="189.777" transform="rotate(90 241.032 199.673)" fill="#0C1942" />
<path d="M58.0009 231.867H155.855H232.501" stroke="#18265D" stroke-width="4" />
<rect x="241.032" y="186.118" width="1.69444" height="189.777" transform="rotate(90 241.032 186.118)" fill="#081334" />
<rect x="110.56" y="125.966" width="1.69444" height="33.8888" fill="#132355" />
<rect x="128.352" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
<rect x="131.741" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
<rect x="136.824" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
<path
d="M221.546 235.257L227.259 244.153M302.879 337.77L296.72 330.145M227.259 244.153L453.308 249.66M227.259 244.153L237.524 256.861M237.524 256.861L462.061 261.944M237.524 256.861L248.816 270.84M248.816 270.84L470.813 274.229M248.816 270.84L257.976 282.18M257.976 282.18L479.566 286.514M257.976 282.18L269.004 295.833M269.004 295.833L488.42 298.939M269.004 295.833L278.243 307.27M278.243 307.27L497.739 312.019M278.243 307.27L290.561 322.52M290.561 322.52H505.221M290.561 322.52L296.72 330.145M296.72 330.145L512.918 333.322"
stroke="#A3BDFF"
stroke-width="4"
/>
<rect x="83.4506" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="51.2557" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="239.338" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<path d="M377.436 511.026H363.88V579.651H377.436V511.026Z" fill="#0C183F" />
<path d="M363.88 579.651H377.436V545.339H363.88V579.651Z" fill="#17275F" />
<path d="M489.691 548.304H467.24V580.499H489.691V548.304Z" fill="#17275F" />
<path d="M148.687 79.7914L146.992 1" stroke="black" stroke-width="3" />
<rect x="210.534" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="151.227" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="77.5193" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="204.602" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="204.602" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="145.298" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="158.853" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
<rect x="162.241" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
<rect x="152.921" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
<path d="M467.24 580.499H489.691V564.402H467.24V580.499Z" fill="#0F1C49" />
<path d="M503.67 556.353H495.198V574.145L503.67 573.721V556.353Z" fill="#FAF2E2" />
<path
d="M200.365 511.449V548.727H204.601V604.643H211.803V546.185H207.143V517.803H248.657V546.185H241.879V604.643H246.115V548.727H254.164V511.449H200.365Z"
fill="#0D0808"
/>
<path d="M241.881 546.186V604.644H211.805V546.186H207.145V517.804H248.659V546.186H241.881Z" fill="#17275F" />
<path d="M584 611.421H0V620H584V611.421Z" fill="#091D39" />
<path
d="M571.873 611.422V576.686M510.026 576.686V611.422M446.485 576.686V611.422M385.909 576.686V611.422M323.214 576.686V611.422M259.249 576.686V611.422M201.638 576.686V611.422M136.826 576.686V611.422M74.132 576.686V611.422M14.4031 576.686V611.422"
stroke="black"
stroke-width="4"
/>
<path
d="M571.873 582C558.6 593.579 527.648 609.789 510.026 582C495.623 590.755 462.751 602.78 446.485 581.769C433.776 590.241 403.869 603.288 385.908 587.699C373.341 593.489 343.209 601.594 323.214 587.699C305.705 591.371 268.399 596.511 259.249 587.699C247.388 591.371 219.26 596.511 201.638 587.699C184.553 591.371 147.67 596.511 136.826 587.699C118.752 593.912 89.8057 602.102 74.1318 587.699C57.0807 591.371 23.3695 597.311 13.5004 588.5"
stroke="black"
stroke-width="3"
/>
<circle cx="571.965" cy="574.965" r="2.96527" fill="#06162A" />
<circle cx="510.026" cy="574.568" r="2.96527" fill="#06162A" />
<circle cx="446.484" cy="575.416" r="2.96527" fill="#06162A" />
<circle cx="385.965" cy="574.965" r="2.96527" fill="#06162A" />
<circle cx="322.965" cy="574.965" r="2.96527" fill="#06162A" />
<circle cx="259.249" cy="575.416" r="2.96527" fill="#06162A" />
<circle cx="201.638" cy="574.568" r="2.96527" fill="#06162A" />
<circle cx="136.965" cy="574.568" r="2.96527" fill="#06162A" />
<circle cx="73.9653" cy="576.262" r="2.96527" fill="#06162A" />
<circle cx="13.9653" cy="577.965" r="2.96527" fill="#06162A" />
<path d="M56.7639 45.479L69.4722 56.4928L82.1805 45.479" stroke="black" stroke-width="4" />
<path d="M8.47162 38.7016L21.1799 49.7154L33.8882 38.7016" stroke="black" stroke-width="4" />
<path d="M63.5413 16.675L76.2496 27.6889L88.9579 16.675" stroke="black" stroke-width="4" />
<path d="M133.014 20.9098L145.722 31.9236L158.431 20.9098" stroke="black" stroke-width="4" />
<path d="M255.86 390.298H210.11L211.805 458.076H255.86V390.298Z" fill="#0F1F4C" />
<path d="M244.847 401.736H221.125V446.638H244.847V401.736Z" fill="#142553" />
</svg>
</div>
</div>
</div>
</div>
</header>
</div>
</body>
</html>
感谢您的帮助，我已经解决了问题。我稍微更改了 HTML。我把 header 和内容分开拿出来，然后把它相对于内容绝对定位，然后一切都解决了。
https://plupiks.github.io/Real-Estate-LandingPage/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<title>Real Estate Landing Page</title>
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="container">
<div class="header--wrapper">
<div class="logo">
<svg width="107" height="24" viewBox="0 0 107 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 23.6163V0.767435H6.99415C12.0513 0.767435 14.5798 2.74418 14.5798 6.69767C14.5798 7.97674 14.2551 9.08139 13.6055 10.0116C12.956 10.9419 12.0745 11.5232 10.961 11.7558C12.2601 11.9419 13.2692 12.5116 13.9883 13.4651C14.7306 14.3953 15.1134 15.6163 15.1366 17.1279C15.1366 21.4535 12.318 23.6163 6.68098 23.6163H0ZM7.20293 20.4767C8.73398 20.4767 9.82428 20.1395 10.4738 19.4651C11.1234 18.7907 11.4481 17.8953 11.4481 16.7791C11.4481 15.6395 11.0886 14.8139 10.3694 14.3023C9.6735 13.7907 8.56 13.5349 7.02894 13.5349H3.61886V20.4767H7.20293ZM11.0306 6.97674C11.0306 4.93023 9.76629 3.90697 7.23772 3.90697H3.61886V10.3953H6.95935C9.6735 10.3953 11.0306 9.25581 11.0306 6.97674Z"
fill="#000228"
/>
<path
d="M17.5376 15.3488C17.5376 12.5349 18.1639 10.407 19.4166 8.96511C20.6693 7.49999 22.4091 6.76744 24.6361 6.76744C26.8631 6.76744 28.5797 7.43022 29.786 8.75581C31.0155 10.0581 31.6534 11.9767 31.6998 14.5116L31.5607 17.093H21.4C21.6088 19.6046 22.8615 20.8605 25.158 20.8605C26.7587 20.8605 28.4521 20.5698 30.2384 19.9884L30.9691 23.0232C30.2268 23.2791 29.2641 23.5 28.081 23.686C26.8979 23.8953 25.9236 24 25.158 24C20.0777 24 17.5376 21.1163 17.5376 15.3488ZM24.7753 10.0116C23.685 10.0116 22.8615 10.3372 22.3047 10.9884C21.7712 11.6163 21.4696 12.6744 21.4 14.1628H27.8374C27.8374 11.3953 26.8167 10.0116 24.7753 10.0116Z"
fill="#000228"
/>
<path
d="M34.0312 22.8488L34.7967 19.6744C37.0005 20.3721 38.752 20.7209 40.0511 20.7209C41.3501 20.7209 42.2317 20.593 42.6956 20.3372C43.1596 20.1046 43.3915 19.686 43.3915 19.0814C43.3915 18.4767 43.1828 18.0465 42.7652 17.7907C42.3476 17.5349 41.5589 17.2674 40.399 16.9884C38.1024 16.4302 36.5018 15.8139 35.5971 15.1395C34.6924 14.4419 34.24 13.3139 34.24 11.7558C34.24 8.43023 36.3742 6.76744 40.6426 6.76744C42.4752 6.76744 44.5978 7.06976 47.0104 7.67441L46.3493 10.9884C44.0527 10.3372 42.2781 10.0116 41.0254 10.0116C39.7727 10.0116 38.926 10.1279 38.4852 10.3605C38.0676 10.5698 37.8589 10.9419 37.8589 11.4767C37.8589 12.0116 38.0676 12.407 38.4852 12.6628C38.926 12.8953 40.0395 13.2558 41.8257 13.7442C43.6119 14.2325 44.9226 14.8023 45.7577 15.4535C46.5928 16.0814 47.0104 17.1628 47.0104 18.6977C47.0104 22.2093 44.853 23.9651 40.5382 23.9651C38.52 23.9651 36.351 23.593 34.0312 22.8488Z"
fill="#000228"
/>
<path
d="M53.2738 7.0465L53.3434 8.05813C55.2224 7.19767 56.6955 6.76744 57.7626 6.76744C59.6416 6.76744 61.0219 7.32557 61.9034 8.44185C62.8081 9.53488 63.2605 11.2558 63.2605 13.6046V23.6163H59.6764V13.7093C59.6764 12.593 59.4792 11.7209 59.0849 11.093C58.6905 10.4651 58.0758 10.1512 57.2407 10.1512C56.4055 10.1512 55.1181 10.5581 53.3782 11.3721V23.6163H49.7941V7.0465H53.2738Z"
fill="#000228"
/>
<path
d="M65.9746 23.6163V20.407H71.1593V10.2558H66.253V7.0465H74.7434V20.407H79.6498V23.6163H65.9746ZM72.76 4.63953C72.0641 4.63953 71.5073 4.43022 71.0898 4.01162C70.6954 3.56976 70.4982 2.99999 70.4982 2.30232C70.4982 1.60464 70.707 1.0465 71.1246 0.6279C71.5421 0.209295 72.0989 -7.62939e-06 72.7948 -7.62939e-06C73.5139 -7.62939e-06 74.0591 0.209295 74.4302 0.6279C74.8246 1.02325 75.0218 1.58139 75.0218 2.30232C75.0218 3.02325 74.8246 3.59302 74.4302 4.01162C74.0359 4.43022 73.4791 4.63953 72.76 4.63953Z"
fill="#000228"
/>
<path
d="M82.5379 23.6163V0.418598H86.122V13.7093L88.4185 13.4651C89.7176 11.7907 90.8543 9.97674 91.8286 8.02325L92.3158 7.0465H96.213C94.7515 10.1395 93.1277 12.7209 91.3415 14.7907C92.8261 16.907 94.3224 19.407 95.8302 22.2907L96.5262 23.6163H92.455C91.3183 21.1512 90.0192 18.7907 88.5577 16.5349L86.122 16.7791V23.6163H82.5379Z"
fill="#000228"
/>
<path d="M101.954 23.6163V18.5581H107V23.6163H101.954Z" fill="#000228" />
</svg>
</div>
<ul class="header--menu menu">
<li class="menu--item"><a href="#" class="menu--link">Home</a></li>
<li class="menu--item"><a href="#" class="menu--link">Fratures</a></li>
<li class="menu--item"><a href="#" class="menu--link">Service</a></li>
<li class="menu--item"><a href="#" class="menu--link">Listed</a></li>
<li class="menu--item"><a href="#" class="menu--link">Contact</a></li>
</ul>
<div class="header--buttons">
<button class="button header--button sign-up">Sign up</button>
<button class="button header--button">Register</button>
</div>
</div>
</header>
<div class="hero">
<div class="container">
<div class="hero--wrapper">
<div class="hero--blok-left">
<div class="hero--descr">Welcome to Besnik Agency</div>
<h1 class="hero--title">Discover a place you’ll love to live.</h1>
<p class="hero--subtitle">
Get the best real estate deals first, before they hit the mass market! hot foreclosure deals with one simple search
</p>
<button class="button hero--button">More About Us</button>
</div>
<div class="hero--block-right">
<div class="hero--img">
<svg width="584" height="620" viewBox="0 0 584 620" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M241.032 610.998L231.713 201.367L58.0327 201.367L60.5743 610.998H241.032Z" fill="#F1F6FF" />
<path d="M302.879 608.881V337.77L512.566 343.89V608.881H302.879Z" fill="#FEFCED" />
<path d="M58.033 201.367L60.5747 610.998H159.276L154.616 201.367H58.033Z" fill="#7398F7" />
<path d="M182.997 159.855H110.983V201.369H182.997V159.855Z" fill="#1F1D42" />
<path d="M110.983 159.855V201.369H159.698C136.315 196.285 129.057 171.575 128.351 159.855H110.983Z" fill="#1F1717" />
<path
d="M152.498 89.1111L144.026 88.2639C141.908 87.4167 141.484 77.6737 149.533 79.7917C155.971 81.4861 154.192 86.7107 152.498 89.1111Z"
fill="#0E173D"
/>
<path d="M152.498 89.112L144.026 88.2648V100.549L152.498 101.397V89.112Z" fill="#0E173D" />
<path d="M144.025 100.548L152.497 101.396L183.845 123.847H110.56L144.025 100.548Z" fill="#1F1D42" />
<path d="M323.636 403.007H316.859V451.298H313.893V456.381H326.602V449.604H323.636V403.007Z" fill="#1B2A63" />
<path d="M512.566 612.269H302.879V473.325L512.566 476.385V612.269Z" fill="#A3BDFF" />
<path d="M448.177 242.458L221.546 235.257L302.879 337.77L520.614 344.124L448.177 242.458Z" fill="#063183" />
<path d="M302.879 337.77L520.614 344.124L316.011 238.258L221.546 235.257L302.879 337.77Z" fill="#7087FB" />
<path
d="M221.546 235.257L302.879 337.77V605.915L152.921 613.117V476.291V337.77L193.164 284.819H184.268L221.546 235.257Z"
fill="#CFDEF3"
/>
<path d="M250.776 297.527H206.297V350.902H250.776V297.527Z" fill="#0C183F" />
<rect x="211.38" y="303.033" width="15.2499" height="18.6388" fill="#1F326B" />
<rect x="232.56" y="303.033" width="15.2499" height="18.6388" fill="#1F326B" />
<rect x="232.56" y="328.451" width="15.2499" height="18.6388" fill="#1F326B" />
<path d="M110.562 123.846H183.846H188.929V125.964H104.631V123.846H110.562Z" stroke="black" />
<path d="M150.804 378.012H303.727H512.99" stroke="black" stroke-width="4" />
<path d="M151.652 486.457H301.186H511.297" stroke="black" stroke-width="5" />
<path d="M151.652 486.457H301.186" stroke="#5267FA" stroke-width="6" />
<rect x="211.38" y="328.451" width="15.2499" height="18.6388" fill="#1F326B" />
<path d="M113.525 289.901H91.0741V350.901H115.22L113.525 289.901Z" fill="#0E173D" />
<path d="M113.525 395.381H91.0741V456.381H115.22L113.525 395.381Z" fill="#0C193F" />
<path d="M114.797 267.027H91.9224V220.43C97.3446 205.18 106.325 214.076 110.138 220.43L114.797 267.027Z" fill="#1F1D42" />
<path
d="M352.019 247.118H327.873L306.693 240.763V201.368V199.25L327.873 198.677L353.714 197.979L353.597 201.368L352.019 247.118Z"
fill="#1F326B"
/>
<path d="M352.019 247.118H327.874V201.368V198.677L353.714 197.979L353.597 201.368L352.019 247.118Z" fill="#FEFDE8" />
<path d="M306.693 199.25L327.873 198.677L353.714 197.979L353.597 201.368H327.873H306.693V199.25Z" fill="#112F7F" />
<rect x="180.881" y="125.966" width="1.69444" height="33.8888" fill="#0C1942" />
<rect x="241.032" y="166.632" width="1.69444" height="189.777" transform="rotate(90 241.032 166.632)" fill="#0C1942" />
<rect x="241.032" y="199.673" width="1.69444" height="189.777" transform="rotate(90 241.032 199.673)" fill="#0C1942" />
<path d="M58.0009 231.867H155.855H232.501" stroke="#18265D" stroke-width="4" />
<rect x="241.032" y="186.118" width="1.69444" height="189.777" transform="rotate(90 241.032 186.118)" fill="#081334" />
<rect x="110.56" y="125.966" width="1.69444" height="33.8888" fill="#132355" />
<rect x="128.352" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
<rect x="131.741" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
<rect x="136.824" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
<path
d="M221.546 235.257L227.259 244.153M302.879 337.77L296.72 330.145M227.259 244.153L453.308 249.66M227.259 244.153L237.524 256.861M237.524 256.861L462.061 261.944M237.524 256.861L248.816 270.84M248.816 270.84L470.813 274.229M248.816 270.84L257.976 282.18M257.976 282.18L479.566 286.514M257.976 282.18L269.004 295.833M269.004 295.833L488.42 298.939M269.004 295.833L278.243 307.27M278.243 307.27L497.739 312.019M278.243 307.27L290.561 322.52M290.561 322.52H505.221M290.561 322.52L296.72 330.145M296.72 330.145L512.918 333.322"
stroke="#A3BDFF"
stroke-width="4"
/>
<rect x="83.4506" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="51.2557" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="239.338" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<path d="M377.436 511.026H363.88V579.651H377.436V511.026Z" fill="#0C183F" />
<path d="M363.88 579.651H377.436V545.339H363.88V579.651Z" fill="#17275F" />
<path d="M489.691 548.304H467.24V580.499H489.691V548.304Z" fill="#17275F" />
<path d="M148.687 79.7914L146.992 1" stroke="black" stroke-width="3" />
<rect x="210.534" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="151.227" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="77.5193" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="204.602" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="204.602" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="145.298" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="158.853" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
<rect x="162.241" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
<rect x="152.921" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
<path d="M467.24 580.499H489.691V564.402H467.24V580.499Z" fill="#0F1C49" />
<path d="M503.67 556.353H495.198V574.145L503.67 573.721V556.353Z" fill="#FAF2E2" />
<path
d="M200.365 511.449V548.727H204.601V604.643H211.803V546.185H207.143V517.803H248.657V546.185H241.879V604.643H246.115V548.727H254.164V511.449H200.365Z"
fill="#0D0808"
/>
<path d="M241.881 546.186V604.644H211.805V546.186H207.145V517.804H248.659V546.186H241.881Z" fill="#17275F" />
<path d="M584 611.421H0V620H584V611.421Z" fill="#091D39" />
<path
d="M571.873 611.422V576.686M510.026 576.686V611.422M446.485 576.686V611.422M385.909 576.686V611.422M323.214 576.686V611.422M259.249 576.686V611.422M201.638 576.686V611.422M136.826 576.686V611.422M74.132 576.686V611.422M14.4031 576.686V611.422"
stroke="black"
stroke-width="4"
/>
<path
d="M571.873 582C558.6 593.579 527.648 609.789 510.026 582C495.623 590.755 462.751 602.78 446.485 581.769C433.776 590.241 403.869 603.288 385.908 587.699C373.341 593.489 343.209 601.594 323.214 587.699C305.705 591.371 268.399 596.511 259.249 587.699C247.388 591.371 219.26 596.511 201.638 587.699C184.553 591.371 147.67 596.511 136.826 587.699C118.752 593.912 89.8057 602.102 74.1318 587.699C57.0807 591.371 23.3695 597.311 13.5004 588.5"
stroke="black"
stroke-width="3"
/>
<circle cx="571.965" cy="574.965" r="2.96527" fill="#06162A" />
<circle cx="510.026" cy="574.568" r="2.96527" fill="#06162A" />
<circle cx="446.484" cy="575.416" r="2.96527" fill="#06162A" />
<circle cx="385.965" cy="574.965" r="2.96527" fill="#06162A" />
<circle cx="322.965" cy="574.965" r="2.96527" fill="#06162A" />
<circle cx="259.249" cy="575.416" r="2.96527" fill="#06162A" />
<circle cx="201.638" cy="574.568" r="2.96527" fill="#06162A" />
<circle cx="136.965" cy="574.568" r="2.96527" fill="#06162A" />
<circle cx="73.9653" cy="576.262" r="2.96527" fill="#06162A" />
<circle cx="13.9653" cy="577.965" r="2.96527" fill="#06162A" />
<path d="M56.7639 45.479L69.4722 56.4928L82.1805 45.479" stroke="black" stroke-width="4" />
<path d="M8.47162 38.7016L21.1799 49.7154L33.8882 38.7016" stroke="black" stroke-width="4" />
<path d="M63.5413 16.675L76.2496 27.6889L88.9579 16.675" stroke="black" stroke-width="4" />
<path d="M133.014 20.9098L145.722 31.9236L158.431 20.9098" stroke="black" stroke-width="4" />
<path d="M255.86 390.298H210.11L211.805 458.076H255.86V390.298Z" fill="#0F1F4C" />
<path d="M244.847 401.736H221.125V446.638H244.847V401.736Z" fill="#142553" />
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
@font-face {
font-family: 'Poppins';
src: url("../fonts/Poppins-Regular.ttf"); }
@font-face {
font-family: 'Poppins';
src: url("../fonts/Poppins-Medium.ttf"); }
@font-face {
font-family: 'Poppins';
src: url("../fonts/Poppins-SemiBold.ttf"); }
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none; }
body {
font-family: Poppins;
font-size: 1rem;
font-weight: 400;
color: #5a6473;
line-height: 1; }
.wrapper {
overflow: hidden; }
button {
border: none; }
.container {
max-width: 1140px;
margin: 0 auto;
padding: 0 15px; }
.header {
position: absolute;
top: 0;
left: 0;
z-index: 1000;
width: 100%; }
.header--wrapper {
display: flex;
padding: 2.375em 0;
column-gap: 4.03125em;
align-items: center; }
.logo {
cursor: pointer;
transition: all 0.2s ease-in-out; }
.logo:hover {
transform: scale(105%); }
.header--menu {
display: flex;
margin-right: auto;
column-gap: 1.875em; }
.menu--link {
display: block;
position: relative;
font-size: 0.875em;
font-weight: 500;
color: #5a6473;
line-height: 1.3125;
text-decoration: none;
transition: all 0.2s ease-in-out; }
.menu--link:visited {
color: #5a6473; }
.menu--link::after {
display: block;
pointer-events: none;
position: absolute;
bottom: -0.7143em;
left: 0;
content: '';
width: 100%;
height: 0.143em;
background-color: #7f8a9b;
opacity: 0;
border-radius: 0.3571em;
transition: all 0.2s ease-in; }
.menu--link:hover {
color: #2d323a;
transform: scaleX(105%); }
.menu--link:hover::after {
bottom: -0.2143em;
opacity: 1; }
.menu--link:active {
color: #717d8f; }
.header--buttons {
display: flex;
column-gap: 1.125em; }
.button {
font-family: Poppins;
cursor: pointer;
padding: 0.7143em 1.43em;
border-radius: 0.57143em;
font-size: 0.875em;
font-weight: 500;
color: white;
line-height: 1.3125;
background-color: #0f1b4c;
transition: all 0.2s ease-in-out; }
.button:hover:not(.sign-up) {
background-color: #1c328c;
transform: scale(105%);
border-radius: 0.7143em; }
.sign-up {
background-color: transparent;
padding: 0;
color: #0f1b4c;
transition: all 0.2s ease-in-out; }
.sign-up:hover {
color: #1c328c;
transform: scale(110%); }
.hero {
position: relative;
background-color: #e6f0ff;
font-size: 16px; }
.hero--wrapper {
display: flex;
column-gap: 4.1875em;
padding-top: 7.125em; }
.hero--blok-left {
flex: 0 0 50.37%;
margin-top: 5.6875em; }
.hero--descr {
margin-bottom: 0.444em;
font-size: 1.125em;
font-weight: 500;
color: #687691;
line-height: 1.6875; }
.hero--title {
margin-bottom: 0.46875em;
font-size: 4em;
font-weight: 700;
color: #000336;
line-height: 1.1875; }
.hero--subtitle {
font-size: 1.125em;
font-weight: 400;
color: #5a6473;
line-height: 2;
margin-bottom: 2.222em; }
.hero--block-right {
display: flex;
align-items: flex-end; }
.hero--img {
width: 36.5em;
height: auto; }
.hero--img svg {
max-width: 100%;
height: auto; }
@media only screen and (max-width: 1024px) {
.header {
font-size: 14px; } }
项目 link:https://plupiks.github.io/Real-Estate-LandingPage/
有一个header是绝对定位的。有一件事，它不会伸展到容器的整个宽度。我使用 gap 设置了缩进。你有解决这个问题的方法吗？我设置了 margin-right: auto 但由于某些原因它不起作用。
使用过 SCSS。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<title>Real Estate Landing Page</title>
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="container">
<nav class="header--nav nav">
<div class="logo">
<svg width="107" height="24" viewBox="0 0 107 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 23.6163V0.767435H6.99415C12.0513 0.767435 14.5798 2.74418 14.5798 6.69767C14.5798 7.97674 14.2551 9.08139 13.6055 10.0116C12.956 10.9419 12.0745 11.5232 10.961 11.7558C12.2601 11.9419 13.2692 12.5116 13.9883 13.4651C14.7306 14.3953 15.1134 15.6163 15.1366 17.1279C15.1366 21.4535 12.318 23.6163 6.68098 23.6163H0ZM7.20293 20.4767C8.73398 20.4767 9.82428 20.1395 10.4738 19.4651C11.1234 18.7907 11.4481 17.8953 11.4481 16.7791C11.4481 15.6395 11.0886 14.8139 10.3694 14.3023C9.6735 13.7907 8.56 13.5349 7.02894 13.5349H3.61886V20.4767H7.20293ZM11.0306 6.97674C11.0306 4.93023 9.76629 3.90697 7.23772 3.90697H3.61886V10.3953H6.95935C9.6735 10.3953 11.0306 9.25581 11.0306 6.97674Z"
fill="#000228"
/>
<path
d="M17.5376 15.3488C17.5376 12.5349 18.1639 10.407 19.4166 8.96511C20.6693 7.49999 22.4091 6.76744 24.6361 6.76744C26.8631 6.76744 28.5797 7.43022 29.786 8.75581C31.0155 10.0581 31.6534 11.9767 31.6998 14.5116L31.5607 17.093H21.4C21.6088 19.6046 22.8615 20.8605 25.158 20.8605C26.7587 20.8605 28.4521 20.5698 30.2384 19.9884L30.9691 23.0232C30.2268 23.2791 29.2641 23.5 28.081 23.686C26.8979 23.8953 25.9236 24 25.158 24C20.0777 24 17.5376 21.1163 17.5376 15.3488ZM24.7753 10.0116C23.685 10.0116 22.8615 10.3372 22.3047 10.9884C21.7712 11.6163 21.4696 12.6744 21.4 14.1628H27.8374C27.8374 11.3953 26.8167 10.0116 24.7753 10.0116Z"
fill="#000228"
/>
<path
d="M34.0312 22.8488L34.7967 19.6744C37.0005 20.3721 38.752 20.7209 40.0511 20.7209C41.3501 20.7209 42.2317 20.593 42.6956 20.3372C43.1596 20.1046 43.3915 19.686 43.3915 19.0814C43.3915 18.4767 43.1828 18.0465 42.7652 17.7907C42.3476 17.5349 41.5589 17.2674 40.399 16.9884C38.1024 16.4302 36.5018 15.8139 35.5971 15.1395C34.6924 14.4419 34.24 13.3139 34.24 11.7558C34.24 8.43023 36.3742 6.76744 40.6426 6.76744C42.4752 6.76744 44.5978 7.06976 47.0104 7.67441L46.3493 10.9884C44.0527 10.3372 42.2781 10.0116 41.0254 10.0116C39.7727 10.0116 38.926 10.1279 38.4852 10.3605C38.0676 10.5698 37.8589 10.9419 37.8589 11.4767C37.8589 12.0116 38.0676 12.407 38.4852 12.6628C38.926 12.8953 40.0395 13.2558 41.8257 13.7442C43.6119 14.2325 44.9226 14.8023 45.7577 15.4535C46.5928 16.0814 47.0104 17.1628 47.0104 18.6977C47.0104 22.2093 44.853 23.9651 40.5382 23.9651C38.52 23.9651 36.351 23.593 34.0312 22.8488Z"
fill="#000228"
/>
<path
d="M53.2738 7.0465L53.3434 8.05813C55.2224 7.19767 56.6955 6.76744 57.7626 6.76744C59.6416 6.76744 61.0219 7.32557 61.9034 8.44185C62.8081 9.53488 63.2605 11.2558 63.2605 13.6046V23.6163H59.6764V13.7093C59.6764 12.593 59.4792 11.7209 59.0849 11.093C58.6905 10.4651 58.0758 10.1512 57.2407 10.1512C56.4055 10.1512 55.1181 10.5581 53.3782 11.3721V23.6163H49.7941V7.0465H53.2738Z"
fill="#000228"
/>
<path
d="M65.9746 23.6163V20.407H71.1593V10.2558H66.253V7.0465H74.7434V20.407H79.6498V23.6163H65.9746ZM72.76 4.63953C72.0641 4.63953 71.5073 4.43022 71.0898 4.01162C70.6954 3.56976 70.4982 2.99999 70.4982 2.30232C70.4982 1.60464 70.707 1.0465 71.1246 0.6279C71.5421 0.209295 72.0989 -7.62939e-06 72.7948 -7.62939e-06C73.5139 -7.62939e-06 74.0591 0.209295 74.4302 0.6279C74.8246 1.02325 75.0218 1.58139 75.0218 2.30232C75.0218 3.02325 74.8246 3.59302 74.4302 4.01162C74.0359 4.43022 73.4791 4.63953 72.76 4.63953Z"
fill="#000228"
/>
<path
d="M82.5379 23.6163V0.418598H86.122V13.7093L88.4185 13.4651C89.7176 11.7907 90.8543 9.97674 91.8286 8.02325L92.3158 7.0465H96.213C94.7515 10.1395 93.1277 12.7209 91.3415 14.7907C92.8261 16.907 94.3224 19.407 95.8302 22.2907L96.5262 23.6163H92.455C91.3183 21.1512 90.0192 18.7907 88.5577 16.5349L86.122 16.7791V23.6163H82.5379Z"
fill="#000228"
/>
<path d="M101.954 23.6163V18.5581H107V23.6163H101.954Z" fill="#000228" />
</svg>
</div>
<ul class="nav--list">
<li class="nav--item"><a href="#" class="nav--link">Home</a></li>
<li class="nav--item"><a href="#" class="nav--link">Fratures</a></li>
<li class="nav--item"><a href="#" class="nav--link">Service</a></li>
<li class="nav--item"><a href="#" class="nav--link">Listed</a></li>
<li class="nav--item"><a href="#" class="nav--link">Contact</a></li>
</ul>
<div class="nav--buttons">
<button class="button nav--button sign-up">Sign up</button>
<button class="button nav--button">Register</button>
</div>
</nav>
<div class="header--inf-block">
<div class="header--blok-left">
<div class="header--descr">Welcome to Besnik Agency</div>
<h1 class="header--title">Discover a place you’ll love to live.</h1>
<p class="header--subtitle">
Get the best real estate deals first, before they hit the mass market! hot foreclosure deals with one simple search
</p>
<button class="button header--button">More About Us</button>
</div>
<div class="header--block-right">
<div class="header--img">
<svg width="584" height="620" viewBox="0 0 584 620" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M241.032 610.998L231.713 201.367L58.0327 201.367L60.5743 610.998H241.032Z" fill="#F1F6FF" />
<path d="M302.879 608.881V337.77L512.566 343.89V608.881H302.879Z" fill="#FEFCED" />
<path d="M58.033 201.367L60.5747 610.998H159.276L154.616 201.367H58.033Z" fill="#7398F7" />
<path d="M182.997 159.855H110.983V201.369H182.997V159.855Z" fill="#1F1D42" />
<path d="M110.983 159.855V201.369H159.698C136.315 196.285 129.057 171.575 128.351 159.855H110.983Z" fill="#1F1717" />
<path
d="M152.498 89.1111L144.026 88.2639C141.908 87.4167 141.484 77.6737 149.533 79.7917C155.971 81.4861 154.192 86.7107 152.498 89.1111Z"
fill="#0E173D"
/>
<path d="M152.498 89.112L144.026 88.2648V100.549L152.498 101.397V89.112Z" fill="#0E173D" />
<path d="M144.025 100.548L152.497 101.396L183.845 123.847H110.56L144.025 100.548Z" fill="#1F1D42" />
<path d="M323.636 403.007H316.859V451.298H313.893V456.381H326.602V449.604H323.636V403.007Z" fill="#1B2A63" />
<path d="M512.566 612.269H302.879V473.325L512.566 476.385V612.269Z" fill="#A3BDFF" />
<path d="M448.177 242.458L221.546 235.257L302.879 337.77L520.614 344.124L448.177 242.458Z" fill="#063183" />
<path d="M302.879 337.77L520.614 344.124L316.011 238.258L221.546 235.257L302.879 337.77Z" fill="#7087FB" />
<path
d="M221.546 235.257L302.879 337.77V605.915L152.921 613.117V476.291V337.77L193.164 284.819H184.268L221.546 235.257Z"
fill="#CFDEF3"
/>
<path d="M250.776 297.527H206.297V350.902H250.776V297.527Z" fill="#0C183F" />
<rect x="211.38" y="303.033" width="15.2499" height="18.6388" fill="#1F326B" />
<rect x="232.56" y="303.033" width="15.2499" height="18.6388" fill="#1F326B" />
<rect x="232.56" y="328.451" width="15.2499" height="18.6388" fill="#1F326B" />
<path d="M110.562 123.846H183.846H188.929V125.964H104.631V123.846H110.562Z" stroke="black" />
<path d="M150.804 378.012H303.727H512.99" stroke="black" stroke-width="4" />
<path d="M151.652 486.457H301.186H511.297" stroke="black" stroke-width="5" />
<path d="M151.652 486.457H301.186" stroke="#5267FA" stroke-width="6" />
<rect x="211.38" y="328.451" width="15.2499" height="18.6388" fill="#1F326B" />
<path d="M113.525 289.901H91.0741V350.901H115.22L113.525 289.901Z" fill="#0E173D" />
<path d="M113.525 395.381H91.0741V456.381H115.22L113.525 395.381Z" fill="#0C193F" />
<path d="M114.797 267.027H91.9224V220.43C97.3446 205.18 106.325 214.076 110.138 220.43L114.797 267.027Z" fill="#1F1D42" />
<path
d="M352.019 247.118H327.873L306.693 240.763V201.368V199.25L327.873 198.677L353.714 197.979L353.597 201.368L352.019 247.118Z"
fill="#1F326B"
/>
<path d="M352.019 247.118H327.874V201.368V198.677L353.714 197.979L353.597 201.368L352.019 247.118Z" fill="#FEFDE8" />
<path d="M306.693 199.25L327.873 198.677L353.714 197.979L353.597 201.368H327.873H306.693V199.25Z" fill="#112F7F" />
<rect x="180.881" y="125.966" width="1.69444" height="33.8888" fill="#0C1942" />
<rect x="241.032" y="166.632" width="1.69444" height="189.777" transform="rotate(90 241.032 166.632)" fill="#0C1942" />
<rect x="241.032" y="199.673" width="1.69444" height="189.777" transform="rotate(90 241.032 199.673)" fill="#0C1942" />
<path d="M58.0009 231.867H155.855H232.501" stroke="#18265D" stroke-width="4" />
<rect x="241.032" y="186.118" width="1.69444" height="189.777" transform="rotate(90 241.032 186.118)" fill="#081334" />
<rect x="110.56" y="125.966" width="1.69444" height="33.8888" fill="#132355" />
<rect x="128.352" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
<rect x="131.741" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
<rect x="136.824" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
<path
d="M221.546 235.257L227.259 244.153M302.879 337.77L296.72 330.145M227.259 244.153L453.308 249.66M227.259 244.153L237.524 256.861M237.524 256.861L462.061 261.944M237.524 256.861L248.816 270.84M248.816 270.84L470.813 274.229M248.816 270.84L257.976 282.18M257.976 282.18L479.566 286.514M257.976 282.18L269.004 295.833M269.004 295.833L488.42 298.939M269.004 295.833L278.243 307.27M278.243 307.27L497.739 312.019M278.243 307.27L290.561 322.52M290.561 322.52H505.221M290.561 322.52L296.72 330.145M296.72 330.145L512.918 333.322"
stroke="#A3BDFF"
stroke-width="4"
/>
<rect x="83.4506" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="51.2557" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="239.338" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<path d="M377.436 511.026H363.88V579.651H377.436V511.026Z" fill="#0C183F" />
<path d="M363.88 579.651H377.436V545.339H363.88V579.651Z" fill="#17275F" />
<path d="M489.691 548.304H467.24V580.499H489.691V548.304Z" fill="#17275F" />
<path d="M148.687 79.7914L146.992 1" stroke="black" stroke-width="3" />
<rect x="210.534" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="151.227" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="77.5193" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="204.602" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="204.602" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="145.298" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="158.853" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
<rect x="162.241" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
<rect x="152.921" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
<path d="M467.24 580.499H489.691V564.402H467.24V580.499Z" fill="#0F1C49" />
<path d="M503.67 556.353H495.198V574.145L503.67 573.721V556.353Z" fill="#FAF2E2" />
<path
d="M200.365 511.449V548.727H204.601V604.643H211.803V546.185H207.143V517.803H248.657V546.185H241.879V604.643H246.115V548.727H254.164V511.449H200.365Z"
fill="#0D0808"
/>
<path d="M241.881 546.186V604.644H211.805V546.186H207.145V517.804H248.659V546.186H241.881Z" fill="#17275F" />
<path d="M584 611.421H0V620H584V611.421Z" fill="#091D39" />
<path
d="M571.873 611.422V576.686M510.026 576.686V611.422M446.485 576.686V611.422M385.909 576.686V611.422M323.214 576.686V611.422M259.249 576.686V611.422M201.638 576.686V611.422M136.826 576.686V611.422M74.132 576.686V611.422M14.4031 576.686V611.422"
stroke="black"
stroke-width="4"
/>
<path
d="M571.873 582C558.6 593.579 527.648 609.789 510.026 582C495.623 590.755 462.751 602.78 446.485 581.769C433.776 590.241 403.869 603.288 385.908 587.699C373.341 593.489 343.209 601.594 323.214 587.699C305.705 591.371 268.399 596.511 259.249 587.699C247.388 591.371 219.26 596.511 201.638 587.699C184.553 591.371 147.67 596.511 136.826 587.699C118.752 593.912 89.8057 602.102 74.1318 587.699C57.0807 591.371 23.3695 597.311 13.5004 588.5"
stroke="black"
stroke-width="3"
/>
<circle cx="571.965" cy="574.965" r="2.96527" fill="#06162A" />
<circle cx="510.026" cy="574.568" r="2.96527" fill="#06162A" />
<circle cx="446.484" cy="575.416" r="2.96527" fill="#06162A" />
<circle cx="385.965" cy="574.965" r="2.96527" fill="#06162A" />
<circle cx="322.965" cy="574.965" r="2.96527" fill="#06162A" />
<circle cx="259.249" cy="575.416" r="2.96527" fill="#06162A" />
<circle cx="201.638" cy="574.568" r="2.96527" fill="#06162A" />
<circle cx="136.965" cy="574.568" r="2.96527" fill="#06162A" />
<circle cx="73.9653" cy="576.262" r="2.96527" fill="#06162A" />
<circle cx="13.9653" cy="577.965" r="2.96527" fill="#06162A" />
<path d="M56.7639 45.479L69.4722 56.4928L82.1805 45.479" stroke="black" stroke-width="4" />
<path d="M8.47162 38.7016L21.1799 49.7154L33.8882 38.7016" stroke="black" stroke-width="4" />
<path d="M63.5413 16.675L76.2496 27.6889L88.9579 16.675" stroke="black" stroke-width="4" />
<path d="M133.014 20.9098L145.722 31.9236L158.431 20.9098" stroke="black" stroke-width="4" />
<path d="M255.86 390.298H210.11L211.805 458.076H255.86V390.298Z" fill="#0F1F4C" />
<path d="M244.847 401.736H221.125V446.638H244.847V401.736Z" fill="#142553" />
</svg>
</div>
</div>
</div>
</div>
</header>
</div>
</body>
</html>
@font-face {
font-family: 'Poppins';
src: url("../fonts/Poppins-Regular.ttf"); }
@font-face {
font-family: 'Poppins';
src: url("../fonts/Poppins-Medium.ttf"); }
@font-face {
font-family: 'Poppins';
src: url("../fonts/Poppins-SemiBold.ttf"); }
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none; }
body {
font-family: Poppins;
font-size: 1rem;
font-weight: 400;
color: #5a6473;
line-height: 1; }
button {
border: none; }
.container {
max-width: 1140px;
margin: 0 auto;
padding: 0 15px; }
.header {
position: relative;
background-color: #e6f0ff;
font-size: 16px; }
.header--nav {
position: absolute;
display: flex;
padding: 2.375em 0;
column-gap: 4.03125em;
align-items: center; }
.logo {
cursor: pointer;
transition: all 0.2s ease-in-out; }
.logo:hover {
transform: scale(105%); }
.nav--list {
display: flex;
margin-right: auto;
column-gap: 1.875em; }
.nav--link {
display: block;
position: relative;
font-size: 0.875em;
font-weight: 500;
color: #5a6473;
line-height: 1.3125;
text-decoration: none;
transition: all 0.2s ease-in-out; }
.nav--link:visited {
color: #5a6473; }
.nav--link::after {
display: block;
pointer-events: none;
position: absolute;
bottom: -0.7143em;
left: 0;
content: '';
width: 100%;
height: 0.143em;
background-color: #7f8a9b;
opacity: 0;
border-radius: 0.3571em;
transition: all 0.2s ease-in; }
.nav--link:hover {
color: #2d323a;
transform: scaleX(105%); }
.nav--link:hover::after {
bottom: -0.2143em;
opacity: 1; }
.nav--link:active {
color: #717d8f; }
.nav--buttons {
display: flex;
column-gap: 1.125em; }
.button {
font-family: Poppins;
cursor: pointer;
padding: 0.7143em 1.43em;
border-radius: 0.57143em;
font-size: 0.875em;
font-weight: 500;
color: white;
line-height: 1.3125;
background-color: #0f1b4c;
transition: all 0.2s ease-in-out; }
.button:hover:not(.sign-up) {
background-color: #1c328c;
transform: scale(105%);
border-radius: 0.7143em; }
.sign-up {
background-color: transparent;
padding: 0;
color: #0f1b4c;
transition: all 0.2s ease-in-out; }
.sign-up:hover {
color: #1c328c;
transform: scale(110%); }
.header--inf-block {
display: flex;
column-gap: 4.1875em;
padding-top: 7.125em; }
.header--blok-left {
flex: 0 0 50.37%;
margin-top: 5.6875em; }
.header--descr {
margin-bottom: 0.444em;
font-size: 1.125em;
font-weight: 500;
color: #687691;
line-height: 1.6875; }
.header--title {
margin-bottom: 0.46875em;
font-size: 4em;
font-weight: 700;
color: #000336;
line-height: 1.1875; }
.header--subtitle {
font-size: 1.125em;
font-weight: 400;
color: #5a6473;
line-height: 2;
margin-bottom: 2.222em; }
从 class“.header--nav”中删除 position:absolute。同时删除“padding-top: 7.125em;”来自“.header--inf-block”。这应该可以解决问题。
@font-face {
font-family: 'Poppins';
src: url("../fonts/Poppins-Regular.ttf"); }
@font-face {
font-family: 'Poppins';
src: url("../fonts/Poppins-Medium.ttf"); }
@font-face {
font-family: 'Poppins';
src: url("../fonts/Poppins-SemiBold.ttf"); }
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none; }
body {
font-family: Poppins;
font-size: 1rem;
font-weight: 400;
color: #5a6473;
line-height: 1; }
button {
border: none; }
.container {
max-width: 1140px;
margin: 0 auto;
padding: 0 15px; }
.header {
position: relative;
background-color: #e6f0ff;
font-size: 16px; }
.header--nav {
display: flex;
padding: 2.375em 0;
column-gap: 4.03125em;
align-items: center; }
.logo {
cursor: pointer;
transition: all 0.2s ease-in-out; }
.logo:hover {
transform: scale(105%); }
.nav--list {
display: flex;
margin-right: auto;
column-gap: 1.875em; }
.nav--link {
display: block;
position: relative;
font-size: 0.875em;
font-weight: 500;
color: #5a6473;
line-height: 1.3125;
text-decoration: none;
transition: all 0.2s ease-in-out; }
.nav--link:visited {
color: #5a6473; }
.nav--link::after {
display: block;
pointer-events: none;
position: absolute;
bottom: -0.7143em;
left: 0;
content: '';
width: 100%;
height: 0.143em;
background-color: #7f8a9b;
opacity: 0;
border-radius: 0.3571em;
transition: all 0.2s ease-in; }
.nav--link:hover {
color: #2d323a;
transform: scaleX(105%); }
.nav--link:hover::after {
bottom: -0.2143em;
opacity: 1; }
.nav--link:active {
color: #717d8f; }
.nav--buttons {
display: flex;
column-gap: 1.125em; }
.button {
font-family: Poppins;
cursor: pointer;
padding: 0.7143em 1.43em;
border-radius: 0.57143em;
font-size: 0.875em;
font-weight: 500;
color: white;
line-height: 1.3125;
background-color: #0f1b4c;
transition: all 0.2s ease-in-out; }
.button:hover:not(.sign-up) {
background-color: #1c328c;
transform: scale(105%);
border-radius: 0.7143em; }
.sign-up {
background-color: transparent;
padding: 0;
color: #0f1b4c;
transition: all 0.2s ease-in-out; }
.sign-up:hover {
color: #1c328c;
transform: scale(110%); }
.header--inf-block {
display: flex;
column-gap: 4.1875em;}
.header--blok-left {
flex: 0 0 50.37%;
margin-top: 5.6875em; }
.header--descr {
margin-bottom: 0.444em;
font-size: 1.125em;
font-weight: 500;
color: #687691;
line-height: 1.6875; }
.header--title {
margin-bottom: 0.46875em;
font-size: 4em;
font-weight: 700;
color: #000336;
line-height: 1.1875; }
.header--subtitle {
font-size: 1.125em;
font-weight: 400;
color: #5a6473;
line-height: 2;
margin-bottom: 2.222em; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<title>Real Estate Landing Page</title>
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="container">
<nav class="header--nav nav">
<div class="logo">
<svg width="107" height="24" viewBox="0 0 107 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 23.6163V0.767435H6.99415C12.0513 0.767435 14.5798 2.74418 14.5798 6.69767C14.5798 7.97674 14.2551 9.08139 13.6055 10.0116C12.956 10.9419 12.0745 11.5232 10.961 11.7558C12.2601 11.9419 13.2692 12.5116 13.9883 13.4651C14.7306 14.3953 15.1134 15.6163 15.1366 17.1279C15.1366 21.4535 12.318 23.6163 6.68098 23.6163H0ZM7.20293 20.4767C8.73398 20.4767 9.82428 20.1395 10.4738 19.4651C11.1234 18.7907 11.4481 17.8953 11.4481 16.7791C11.4481 15.6395 11.0886 14.8139 10.3694 14.3023C9.6735 13.7907 8.56 13.5349 7.02894 13.5349H3.61886V20.4767H7.20293ZM11.0306 6.97674C11.0306 4.93023 9.76629 3.90697 7.23772 3.90697H3.61886V10.3953H6.95935C9.6735 10.3953 11.0306 9.25581 11.0306 6.97674Z"
fill="#000228"
/>
<path
d="M17.5376 15.3488C17.5376 12.5349 18.1639 10.407 19.4166 8.96511C20.6693 7.49999 22.4091 6.76744 24.6361 6.76744C26.8631 6.76744 28.5797 7.43022 29.786 8.75581C31.0155 10.0581 31.6534 11.9767 31.6998 14.5116L31.5607 17.093H21.4C21.6088 19.6046 22.8615 20.8605 25.158 20.8605C26.7587 20.8605 28.4521 20.5698 30.2384 19.9884L30.9691 23.0232C30.2268 23.2791 29.2641 23.5 28.081 23.686C26.8979 23.8953 25.9236 24 25.158 24C20.0777 24 17.5376 21.1163 17.5376 15.3488ZM24.7753 10.0116C23.685 10.0116 22.8615 10.3372 22.3047 10.9884C21.7712 11.6163 21.4696 12.6744 21.4 14.1628H27.8374C27.8374 11.3953 26.8167 10.0116 24.7753 10.0116Z"
fill="#000228"
/>
<path
d="M34.0312 22.8488L34.7967 19.6744C37.0005 20.3721 38.752 20.7209 40.0511 20.7209C41.3501 20.7209 42.2317 20.593 42.6956 20.3372C43.1596 20.1046 43.3915 19.686 43.3915 19.0814C43.3915 18.4767 43.1828 18.0465 42.7652 17.7907C42.3476 17.5349 41.5589 17.2674 40.399 16.9884C38.1024 16.4302 36.5018 15.8139 35.5971 15.1395C34.6924 14.4419 34.24 13.3139 34.24 11.7558C34.24 8.43023 36.3742 6.76744 40.6426 6.76744C42.4752 6.76744 44.5978 7.06976 47.0104 7.67441L46.3493 10.9884C44.0527 10.3372 42.2781 10.0116 41.0254 10.0116C39.7727 10.0116 38.926 10.1279 38.4852 10.3605C38.0676 10.5698 37.8589 10.9419 37.8589 11.4767C37.8589 12.0116 38.0676 12.407 38.4852 12.6628C38.926 12.8953 40.0395 13.2558 41.8257 13.7442C43.6119 14.2325 44.9226 14.8023 45.7577 15.4535C46.5928 16.0814 47.0104 17.1628 47.0104 18.6977C47.0104 22.2093 44.853 23.9651 40.5382 23.9651C38.52 23.9651 36.351 23.593 34.0312 22.8488Z"
fill="#000228"
/>
<path
d="M53.2738 7.0465L53.3434 8.05813C55.2224 7.19767 56.6955 6.76744 57.7626 6.76744C59.6416 6.76744 61.0219 7.32557 61.9034 8.44185C62.8081 9.53488 63.2605 11.2558 63.2605 13.6046V23.6163H59.6764V13.7093C59.6764 12.593 59.4792 11.7209 59.0849 11.093C58.6905 10.4651 58.0758 10.1512 57.2407 10.1512C56.4055 10.1512 55.1181 10.5581 53.3782 11.3721V23.6163H49.7941V7.0465H53.2738Z"
fill="#000228"
/>
<path
d="M65.9746 23.6163V20.407H71.1593V10.2558H66.253V7.0465H74.7434V20.407H79.6498V23.6163H65.9746ZM72.76 4.63953C72.0641 4.63953 71.5073 4.43022 71.0898 4.01162C70.6954 3.56976 70.4982 2.99999 70.4982 2.30232C70.4982 1.60464 70.707 1.0465 71.1246 0.6279C71.5421 0.209295 72.0989 -7.62939e-06 72.7948 -7.62939e-06C73.5139 -7.62939e-06 74.0591 0.209295 74.4302 0.6279C74.8246 1.02325 75.0218 1.58139 75.0218 2.30232C75.0218 3.02325 74.8246 3.59302 74.4302 4.01162C74.0359 4.43022 73.4791 4.63953 72.76 4.63953Z"
fill="#000228"
/>
<path
d="M82.5379 23.6163V0.418598H86.122V13.7093L88.4185 13.4651C89.7176 11.7907 90.8543 9.97674 91.8286 8.02325L92.3158 7.0465H96.213C94.7515 10.1395 93.1277 12.7209 91.3415 14.7907C92.8261 16.907 94.3224 19.407 95.8302 22.2907L96.5262 23.6163H92.455C91.3183 21.1512 90.0192 18.7907 88.5577 16.5349L86.122 16.7791V23.6163H82.5379Z"
fill="#000228"
/>
<path d="M101.954 23.6163V18.5581H107V23.6163H101.954Z" fill="#000228" />
</svg>
</div>
<ul class="nav--list">
<li class="nav--item"><a href="#" class="nav--link">Home</a></li>
<li class="nav--item"><a href="#" class="nav--link">Fratures</a></li>
<li class="nav--item"><a href="#" class="nav--link">Service</a></li>
<li class="nav--item"><a href="#" class="nav--link">Listed</a></li>
<li class="nav--item"><a href="#" class="nav--link">Contact</a></li>
</ul>
<div class="nav--buttons">
<button class="button nav--button sign-up">Sign up</button>
<button class="button nav--button">Register</button>
</div>
</nav>
<div class="header--inf-block">
<div class="header--blok-left">
<div class="header--descr">Welcome to Besnik Agency</div>
<h1 class="header--title">Discover a place you’ll love to live.</h1>
<p class="header--subtitle">
Get the best real estate deals first, before they hit the mass market! hot foreclosure deals with one simple search
</p>
<button class="button header--button">More About Us</button>
</div>
<div class="header--block-right">
<div class="header--img">
<svg width="584" height="620" viewBox="0 0 584 620" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M241.032 610.998L231.713 201.367L58.0327 201.367L60.5743 610.998H241.032Z" fill="#F1F6FF" />
<path d="M302.879 608.881V337.77L512.566 343.89V608.881H302.879Z" fill="#FEFCED" />
<path d="M58.033 201.367L60.5747 610.998H159.276L154.616 201.367H58.033Z" fill="#7398F7" />
<path d="M182.997 159.855H110.983V201.369H182.997V159.855Z" fill="#1F1D42" />
<path d="M110.983 159.855V201.369H159.698C136.315 196.285 129.057 171.575 128.351 159.855H110.983Z" fill="#1F1717" />
<path
d="M152.498 89.1111L144.026 88.2639C141.908 87.4167 141.484 77.6737 149.533 79.7917C155.971 81.4861 154.192 86.7107 152.498 89.1111Z"
fill="#0E173D"
/>
<path d="M152.498 89.112L144.026 88.2648V100.549L152.498 101.397V89.112Z" fill="#0E173D" />
<path d="M144.025 100.548L152.497 101.396L183.845 123.847H110.56L144.025 100.548Z" fill="#1F1D42" />
<path d="M323.636 403.007H316.859V451.298H313.893V456.381H326.602V449.604H323.636V403.007Z" fill="#1B2A63" />
<path d="M512.566 612.269H302.879V473.325L512.566 476.385V612.269Z" fill="#A3BDFF" />
<path d="M448.177 242.458L221.546 235.257L302.879 337.77L520.614 344.124L448.177 242.458Z" fill="#063183" />
<path d="M302.879 337.77L520.614 344.124L316.011 238.258L221.546 235.257L302.879 337.77Z" fill="#7087FB" />
<path
d="M221.546 235.257L302.879 337.77V605.915L152.921 613.117V476.291V337.77L193.164 284.819H184.268L221.546 235.257Z"
fill="#CFDEF3"
/>
<path d="M250.776 297.527H206.297V350.902H250.776V297.527Z" fill="#0C183F" />
<rect x="211.38" y="303.033" width="15.2499" height="18.6388" fill="#1F326B" />
<rect x="232.56" y="303.033" width="15.2499" height="18.6388" fill="#1F326B" />
<rect x="232.56" y="328.451" width="15.2499" height="18.6388" fill="#1F326B" />
<path d="M110.562 123.846H183.846H188.929V125.964H104.631V123.846H110.562Z" stroke="black" />
<path d="M150.804 378.012H303.727H512.99" stroke="black" stroke-width="4" />
<path d="M151.652 486.457H301.186H511.297" stroke="black" stroke-width="5" />
<path d="M151.652 486.457H301.186" stroke="#5267FA" stroke-width="6" />
<rect x="211.38" y="328.451" width="15.2499" height="18.6388" fill="#1F326B" />
<path d="M113.525 289.901H91.0741V350.901H115.22L113.525 289.901Z" fill="#0E173D" />
<path d="M113.525 395.381H91.0741V456.381H115.22L113.525 395.381Z" fill="#0C193F" />
<path d="M114.797 267.027H91.9224V220.43C97.3446 205.18 106.325 214.076 110.138 220.43L114.797 267.027Z" fill="#1F1D42" />
<path
d="M352.019 247.118H327.873L306.693 240.763V201.368V199.25L327.873 198.677L353.714 197.979L353.597 201.368L352.019 247.118Z"
fill="#1F326B"
/>
<path d="M352.019 247.118H327.874V201.368V198.677L353.714 197.979L353.597 201.368L352.019 247.118Z" fill="#FEFDE8" />
<path d="M306.693 199.25L327.873 198.677L353.714 197.979L353.597 201.368H327.873H306.693V199.25Z" fill="#112F7F" />
<rect x="180.881" y="125.966" width="1.69444" height="33.8888" fill="#0C1942" />
<rect x="241.032" y="166.632" width="1.69444" height="189.777" transform="rotate(90 241.032 166.632)" fill="#0C1942" />
<rect x="241.032" y="199.673" width="1.69444" height="189.777" transform="rotate(90 241.032 199.673)" fill="#0C1942" />
<path d="M58.0009 231.867H155.855H232.501" stroke="#18265D" stroke-width="4" />
<rect x="241.032" y="186.118" width="1.69444" height="189.777" transform="rotate(90 241.032 186.118)" fill="#081334" />
<rect x="110.56" y="125.966" width="1.69444" height="33.8888" fill="#132355" />
<rect x="128.352" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
<rect x="131.741" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
<rect x="136.824" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
<path
d="M221.546 235.257L227.259 244.153M302.879 337.77L296.72 330.145M227.259 244.153L453.308 249.66M227.259 244.153L237.524 256.861M237.524 256.861L462.061 261.944M237.524 256.861L248.816 270.84M248.816 270.84L470.813 274.229M248.816 270.84L257.976 282.18M257.976 282.18L479.566 286.514M257.976 282.18L269.004 295.833M269.004 295.833L488.42 298.939M269.004 295.833L278.243 307.27M278.243 307.27L497.739 312.019M278.243 307.27L290.561 322.52M290.561 322.52H505.221M290.561 322.52L296.72 330.145M296.72 330.145L512.918 333.322"
stroke="#A3BDFF"
stroke-width="4"
/>
<rect x="83.4506" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="51.2557" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="239.338" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<path d="M377.436 511.026H363.88V579.651H377.436V511.026Z" fill="#0C183F" />
<path d="M363.88 579.651H377.436V545.339H363.88V579.651Z" fill="#17275F" />
<path d="M489.691 548.304H467.24V580.499H489.691V548.304Z" fill="#17275F" />
<path d="M148.687 79.7914L146.992 1" stroke="black" stroke-width="3" />
<rect x="210.534" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="151.227" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="77.5193" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="204.602" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="204.602" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="145.298" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="158.853" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
<rect x="162.241" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
<rect x="152.921" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
<path d="M467.24 580.499H489.691V564.402H467.24V580.499Z" fill="#0F1C49" />
<path d="M503.67 556.353H495.198V574.145L503.67 573.721V556.353Z" fill="#FAF2E2" />
<path
d="M200.365 511.449V548.727H204.601V604.643H211.803V546.185H207.143V517.803H248.657V546.185H241.879V604.643H246.115V548.727H254.164V511.449H200.365Z"
fill="#0D0808"
/>
<path d="M241.881 546.186V604.644H211.805V546.186H207.145V517.804H248.659V546.186H241.881Z" fill="#17275F" />
<path d="M584 611.421H0V620H584V611.421Z" fill="#091D39" />
<path
d="M571.873 611.422V576.686M510.026 576.686V611.422M446.485 576.686V611.422M385.909 576.686V611.422M323.214 576.686V611.422M259.249 576.686V611.422M201.638 576.686V611.422M136.826 576.686V611.422M74.132 576.686V611.422M14.4031 576.686V611.422"
stroke="black"
stroke-width="4"
/>
<path
d="M571.873 582C558.6 593.579 527.648 609.789 510.026 582C495.623 590.755 462.751 602.78 446.485 581.769C433.776 590.241 403.869 603.288 385.908 587.699C373.341 593.489 343.209 601.594 323.214 587.699C305.705 591.371 268.399 596.511 259.249 587.699C247.388 591.371 219.26 596.511 201.638 587.699C184.553 591.371 147.67 596.511 136.826 587.699C118.752 593.912 89.8057 602.102 74.1318 587.699C57.0807 591.371 23.3695 597.311 13.5004 588.5"
stroke="black"
stroke-width="3"
/>
<circle cx="571.965" cy="574.965" r="2.96527" fill="#06162A" />
<circle cx="510.026" cy="574.568" r="2.96527" fill="#06162A" />
<circle cx="446.484" cy="575.416" r="2.96527" fill="#06162A" />
<circle cx="385.965" cy="574.965" r="2.96527" fill="#06162A" />
<circle cx="322.965" cy="574.965" r="2.96527" fill="#06162A" />
<circle cx="259.249" cy="575.416" r="2.96527" fill="#06162A" />
<circle cx="201.638" cy="574.568" r="2.96527" fill="#06162A" />
<circle cx="136.965" cy="574.568" r="2.96527" fill="#06162A" />
<circle cx="73.9653" cy="576.262" r="2.96527" fill="#06162A" />
<circle cx="13.9653" cy="577.965" r="2.96527" fill="#06162A" />
<path d="M56.7639 45.479L69.4722 56.4928L82.1805 45.479" stroke="black" stroke-width="4" />
<path d="M8.47162 38.7016L21.1799 49.7154L33.8882 38.7016" stroke="black" stroke-width="4" />
<path d="M63.5413 16.675L76.2496 27.6889L88.9579 16.675" stroke="black" stroke-width="4" />
<path d="M133.014 20.9098L145.722 31.9236L158.431 20.9098" stroke="black" stroke-width="4" />
<path d="M255.86 390.298H210.11L211.805 458.076H255.86V390.298Z" fill="#0F1F4C" />
<path d="M244.847 401.736H221.125V446.638H244.847V401.736Z" fill="#142553" />
</svg>
</div>
</div>
</div>
</div>
</header>
</div>
</body>
</html>
感谢您的帮助，我已经解决了问题。我稍微更改了 HTML。我把 header 和内容分开拿出来，然后把它相对于内容绝对定位，然后一切都解决了。
https://plupiks.github.io/Real-Estate-LandingPage/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<title>Real Estate Landing Page</title>
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="container">
<div class="header--wrapper">
<div class="logo">
<svg width="107" height="24" viewBox="0 0 107 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 23.6163V0.767435H6.99415C12.0513 0.767435 14.5798 2.74418 14.5798 6.69767C14.5798 7.97674 14.2551 9.08139 13.6055 10.0116C12.956 10.9419 12.0745 11.5232 10.961 11.7558C12.2601 11.9419 13.2692 12.5116 13.9883 13.4651C14.7306 14.3953 15.1134 15.6163 15.1366 17.1279C15.1366 21.4535 12.318 23.6163 6.68098 23.6163H0ZM7.20293 20.4767C8.73398 20.4767 9.82428 20.1395 10.4738 19.4651C11.1234 18.7907 11.4481 17.8953 11.4481 16.7791C11.4481 15.6395 11.0886 14.8139 10.3694 14.3023C9.6735 13.7907 8.56 13.5349 7.02894 13.5349H3.61886V20.4767H7.20293ZM11.0306 6.97674C11.0306 4.93023 9.76629 3.90697 7.23772 3.90697H3.61886V10.3953H6.95935C9.6735 10.3953 11.0306 9.25581 11.0306 6.97674Z"
fill="#000228"
/>
<path
d="M17.5376 15.3488C17.5376 12.5349 18.1639 10.407 19.4166 8.96511C20.6693 7.49999 22.4091 6.76744 24.6361 6.76744C26.8631 6.76744 28.5797 7.43022 29.786 8.75581C31.0155 10.0581 31.6534 11.9767 31.6998 14.5116L31.5607 17.093H21.4C21.6088 19.6046 22.8615 20.8605 25.158 20.8605C26.7587 20.8605 28.4521 20.5698 30.2384 19.9884L30.9691 23.0232C30.2268 23.2791 29.2641 23.5 28.081 23.686C26.8979 23.8953 25.9236 24 25.158 24C20.0777 24 17.5376 21.1163 17.5376 15.3488ZM24.7753 10.0116C23.685 10.0116 22.8615 10.3372 22.3047 10.9884C21.7712 11.6163 21.4696 12.6744 21.4 14.1628H27.8374C27.8374 11.3953 26.8167 10.0116 24.7753 10.0116Z"
fill="#000228"
/>
<path
d="M34.0312 22.8488L34.7967 19.6744C37.0005 20.3721 38.752 20.7209 40.0511 20.7209C41.3501 20.7209 42.2317 20.593 42.6956 20.3372C43.1596 20.1046 43.3915 19.686 43.3915 19.0814C43.3915 18.4767 43.1828 18.0465 42.7652 17.7907C42.3476 17.5349 41.5589 17.2674 40.399 16.9884C38.1024 16.4302 36.5018 15.8139 35.5971 15.1395C34.6924 14.4419 34.24 13.3139 34.24 11.7558C34.24 8.43023 36.3742 6.76744 40.6426 6.76744C42.4752 6.76744 44.5978 7.06976 47.0104 7.67441L46.3493 10.9884C44.0527 10.3372 42.2781 10.0116 41.0254 10.0116C39.7727 10.0116 38.926 10.1279 38.4852 10.3605C38.0676 10.5698 37.8589 10.9419 37.8589 11.4767C37.8589 12.0116 38.0676 12.407 38.4852 12.6628C38.926 12.8953 40.0395 13.2558 41.8257 13.7442C43.6119 14.2325 44.9226 14.8023 45.7577 15.4535C46.5928 16.0814 47.0104 17.1628 47.0104 18.6977C47.0104 22.2093 44.853 23.9651 40.5382 23.9651C38.52 23.9651 36.351 23.593 34.0312 22.8488Z"
fill="#000228"
/>
<path
d="M53.2738 7.0465L53.3434 8.05813C55.2224 7.19767 56.6955 6.76744 57.7626 6.76744C59.6416 6.76744 61.0219 7.32557 61.9034 8.44185C62.8081 9.53488 63.2605 11.2558 63.2605 13.6046V23.6163H59.6764V13.7093C59.6764 12.593 59.4792 11.7209 59.0849 11.093C58.6905 10.4651 58.0758 10.1512 57.2407 10.1512C56.4055 10.1512 55.1181 10.5581 53.3782 11.3721V23.6163H49.7941V7.0465H53.2738Z"
fill="#000228"
/>
<path
d="M65.9746 23.6163V20.407H71.1593V10.2558H66.253V7.0465H74.7434V20.407H79.6498V23.6163H65.9746ZM72.76 4.63953C72.0641 4.63953 71.5073 4.43022 71.0898 4.01162C70.6954 3.56976 70.4982 2.99999 70.4982 2.30232C70.4982 1.60464 70.707 1.0465 71.1246 0.6279C71.5421 0.209295 72.0989 -7.62939e-06 72.7948 -7.62939e-06C73.5139 -7.62939e-06 74.0591 0.209295 74.4302 0.6279C74.8246 1.02325 75.0218 1.58139 75.0218 2.30232C75.0218 3.02325 74.8246 3.59302 74.4302 4.01162C74.0359 4.43022 73.4791 4.63953 72.76 4.63953Z"
fill="#000228"
/>
<path
d="M82.5379 23.6163V0.418598H86.122V13.7093L88.4185 13.4651C89.7176 11.7907 90.8543 9.97674 91.8286 8.02325L92.3158 7.0465H96.213C94.7515 10.1395 93.1277 12.7209 91.3415 14.7907C92.8261 16.907 94.3224 19.407 95.8302 22.2907L96.5262 23.6163H92.455C91.3183 21.1512 90.0192 18.7907 88.5577 16.5349L86.122 16.7791V23.6163H82.5379Z"
fill="#000228"
/>
<path d="M101.954 23.6163V18.5581H107V23.6163H101.954Z" fill="#000228" />
</svg>
</div>
<ul class="header--menu menu">
<li class="menu--item"><a href="#" class="menu--link">Home</a></li>
<li class="menu--item"><a href="#" class="menu--link">Fratures</a></li>
<li class="menu--item"><a href="#" class="menu--link">Service</a></li>
<li class="menu--item"><a href="#" class="menu--link">Listed</a></li>
<li class="menu--item"><a href="#" class="menu--link">Contact</a></li>
</ul>
<div class="header--buttons">
<button class="button header--button sign-up">Sign up</button>
<button class="button header--button">Register</button>
</div>
</div>
</header>
<div class="hero">
<div class="container">
<div class="hero--wrapper">
<div class="hero--blok-left">
<div class="hero--descr">Welcome to Besnik Agency</div>
<h1 class="hero--title">Discover a place you’ll love to live.</h1>
<p class="hero--subtitle">
Get the best real estate deals first, before they hit the mass market! hot foreclosure deals with one simple search
</p>
<button class="button hero--button">More About Us</button>
</div>
<div class="hero--block-right">
<div class="hero--img">
<svg width="584" height="620" viewBox="0 0 584 620" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M241.032 610.998L231.713 201.367L58.0327 201.367L60.5743 610.998H241.032Z" fill="#F1F6FF" />
<path d="M302.879 608.881V337.77L512.566 343.89V608.881H302.879Z" fill="#FEFCED" />
<path d="M58.033 201.367L60.5747 610.998H159.276L154.616 201.367H58.033Z" fill="#7398F7" />
<path d="M182.997 159.855H110.983V201.369H182.997V159.855Z" fill="#1F1D42" />
<path d="M110.983 159.855V201.369H159.698C136.315 196.285 129.057 171.575 128.351 159.855H110.983Z" fill="#1F1717" />
<path
d="M152.498 89.1111L144.026 88.2639C141.908 87.4167 141.484 77.6737 149.533 79.7917C155.971 81.4861 154.192 86.7107 152.498 89.1111Z"
fill="#0E173D"
/>
<path d="M152.498 89.112L144.026 88.2648V100.549L152.498 101.397V89.112Z" fill="#0E173D" />
<path d="M144.025 100.548L152.497 101.396L183.845 123.847H110.56L144.025 100.548Z" fill="#1F1D42" />
<path d="M323.636 403.007H316.859V451.298H313.893V456.381H326.602V449.604H323.636V403.007Z" fill="#1B2A63" />
<path d="M512.566 612.269H302.879V473.325L512.566 476.385V612.269Z" fill="#A3BDFF" />
<path d="M448.177 242.458L221.546 235.257L302.879 337.77L520.614 344.124L448.177 242.458Z" fill="#063183" />
<path d="M302.879 337.77L520.614 344.124L316.011 238.258L221.546 235.257L302.879 337.77Z" fill="#7087FB" />
<path
d="M221.546 235.257L302.879 337.77V605.915L152.921 613.117V476.291V337.77L193.164 284.819H184.268L221.546 235.257Z"
fill="#CFDEF3"
/>
<path d="M250.776 297.527H206.297V350.902H250.776V297.527Z" fill="#0C183F" />
<rect x="211.38" y="303.033" width="15.2499" height="18.6388" fill="#1F326B" />
<rect x="232.56" y="303.033" width="15.2499" height="18.6388" fill="#1F326B" />
<rect x="232.56" y="328.451" width="15.2499" height="18.6388" fill="#1F326B" />
<path d="M110.562 123.846H183.846H188.929V125.964H104.631V123.846H110.562Z" stroke="black" />
<path d="M150.804 378.012H303.727H512.99" stroke="black" stroke-width="4" />
<path d="M151.652 486.457H301.186H511.297" stroke="black" stroke-width="5" />
<path d="M151.652 486.457H301.186" stroke="#5267FA" stroke-width="6" />
<rect x="211.38" y="328.451" width="15.2499" height="18.6388" fill="#1F326B" />
<path d="M113.525 289.901H91.0741V350.901H115.22L113.525 289.901Z" fill="#0E173D" />
<path d="M113.525 395.381H91.0741V456.381H115.22L113.525 395.381Z" fill="#0C193F" />
<path d="M114.797 267.027H91.9224V220.43C97.3446 205.18 106.325 214.076 110.138 220.43L114.797 267.027Z" fill="#1F1D42" />
<path
d="M352.019 247.118H327.873L306.693 240.763V201.368V199.25L327.873 198.677L353.714 197.979L353.597 201.368L352.019 247.118Z"
fill="#1F326B"
/>
<path d="M352.019 247.118H327.874V201.368V198.677L353.714 197.979L353.597 201.368L352.019 247.118Z" fill="#FEFDE8" />
<path d="M306.693 199.25L327.873 198.677L353.714 197.979L353.597 201.368H327.873H306.693V199.25Z" fill="#112F7F" />
<rect x="180.881" y="125.966" width="1.69444" height="33.8888" fill="#0C1942" />
<rect x="241.032" y="166.632" width="1.69444" height="189.777" transform="rotate(90 241.032 166.632)" fill="#0C1942" />
<rect x="241.032" y="199.673" width="1.69444" height="189.777" transform="rotate(90 241.032 199.673)" fill="#0C1942" />
<path d="M58.0009 231.867H155.855H232.501" stroke="#18265D" stroke-width="4" />
<rect x="241.032" y="186.118" width="1.69444" height="189.777" transform="rotate(90 241.032 186.118)" fill="#081334" />
<rect x="110.56" y="125.966" width="1.69444" height="33.8888" fill="#132355" />
<rect x="128.352" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
<rect x="131.741" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
<rect x="136.824" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
<path
d="M221.546 235.257L227.259 244.153M302.879 337.77L296.72 330.145M227.259 244.153L453.308 249.66M227.259 244.153L237.524 256.861M237.524 256.861L462.061 261.944M237.524 256.861L248.816 270.84M248.816 270.84L470.813 274.229M248.816 270.84L257.976 282.18M257.976 282.18L479.566 286.514M257.976 282.18L269.004 295.833M269.004 295.833L488.42 298.939M269.004 295.833L278.243 307.27M278.243 307.27L497.739 312.019M278.243 307.27L290.561 322.52M290.561 322.52H505.221M290.561 322.52L296.72 330.145M296.72 330.145L512.918 333.322"
stroke="#A3BDFF"
stroke-width="4"
/>
<rect x="83.4506" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="51.2557" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="239.338" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<path d="M377.436 511.026H363.88V579.651H377.436V511.026Z" fill="#0C183F" />
<path d="M363.88 579.651H377.436V545.339H363.88V579.651Z" fill="#17275F" />
<path d="M489.691 548.304H467.24V580.499H489.691V548.304Z" fill="#17275F" />
<path d="M148.687 79.7914L146.992 1" stroke="black" stroke-width="3" />
<rect x="210.534" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="151.227" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="77.5193" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="204.602" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="204.602" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="145.298" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="158.853" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
<rect x="162.241" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
<rect x="152.921" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
<path d="M467.24 580.499H489.691V564.402H467.24V580.499Z" fill="#0F1C49" />
<path d="M503.67 556.353H495.198V574.145L503.67 573.721V556.353Z" fill="#FAF2E2" />
<path
d="M200.365 511.449V548.727H204.601V604.643H211.803V546.185H207.143V517.803H248.657V546.185H241.879V604.643H246.115V548.727H254.164V511.449H200.365Z"
fill="#0D0808"
/>
<path d="M241.881 546.186V604.644H211.805V546.186H207.145V517.804H248.659V546.186H241.881Z" fill="#17275F" />
<path d="M584 611.421H0V620H584V611.421Z" fill="#091D39" />
<path
d="M571.873 611.422V576.686M510.026 576.686V611.422M446.485 576.686V611.422M385.909 576.686V611.422M323.214 576.686V611.422M259.249 576.686V611.422M201.638 576.686V611.422M136.826 576.686V611.422M74.132 576.686V611.422M14.4031 576.686V611.422"
stroke="black"
stroke-width="4"
/>
<path
d="M571.873 582C558.6 593.579 527.648 609.789 510.026 582C495.623 590.755 462.751 602.78 446.485 581.769C433.776 590.241 403.869 603.288 385.908 587.699C373.341 593.489 343.209 601.594 323.214 587.699C305.705 591.371 268.399 596.511 259.249 587.699C247.388 591.371 219.26 596.511 201.638 587.699C184.553 591.371 147.67 596.511 136.826 587.699C118.752 593.912 89.8057 602.102 74.1318 587.699C57.0807 591.371 23.3695 597.311 13.5004 588.5"
stroke="black"
stroke-width="3"
/>
<circle cx="571.965" cy="574.965" r="2.96527" fill="#06162A" />
<circle cx="510.026" cy="574.568" r="2.96527" fill="#06162A" />
<circle cx="446.484" cy="575.416" r="2.96527" fill="#06162A" />
<circle cx="385.965" cy="574.965" r="2.96527" fill="#06162A" />
<circle cx="322.965" cy="574.965" r="2.96527" fill="#06162A" />
<circle cx="259.249" cy="575.416" r="2.96527" fill="#06162A" />
<circle cx="201.638" cy="574.568" r="2.96527" fill="#06162A" />
<circle cx="136.965" cy="574.568" r="2.96527" fill="#06162A" />
<circle cx="73.9653" cy="576.262" r="2.96527" fill="#06162A" />
<circle cx="13.9653" cy="577.965" r="2.96527" fill="#06162A" />
<path d="M56.7639 45.479L69.4722 56.4928L82.1805 45.479" stroke="black" stroke-width="4" />
<path d="M8.47162 38.7016L21.1799 49.7154L33.8882 38.7016" stroke="black" stroke-width="4" />
<path d="M63.5413 16.675L76.2496 27.6889L88.9579 16.675" stroke="black" stroke-width="4" />
<path d="M133.014 20.9098L145.722 31.9236L158.431 20.9098" stroke="black" stroke-width="4" />
<path d="M255.86 390.298H210.11L211.805 458.076H255.86V390.298Z" fill="#0F1F4C" />
<path d="M244.847 401.736H221.125V446.638H244.847V401.736Z" fill="#142553" />
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
@font-face {
font-family: 'Poppins';
src: url("../fonts/Poppins-Regular.ttf"); }
@font-face {
font-family: 'Poppins';
src: url("../fonts/Poppins-Medium.ttf"); }
@font-face {
font-family: 'Poppins';
src: url("../fonts/Poppins-SemiBold.ttf"); }
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none; }
body {
font-family: Poppins;
font-size: 1rem;
font-weight: 400;
color: #5a6473;
line-height: 1; }
.wrapper {
overflow: hidden; }
button {
border: none; }
.container {
max-width: 1140px;
margin: 0 auto;
padding: 0 15px; }
.header {
position: absolute;
top: 0;
left: 0;
z-index: 1000;
width: 100%; }
.header--wrapper {
display: flex;
padding: 2.375em 0;
column-gap: 4.03125em;
align-items: center; }
.logo {
cursor: pointer;
transition: all 0.2s ease-in-out; }
.logo:hover {
transform: scale(105%); }
.header--menu {
display: flex;
margin-right: auto;
column-gap: 1.875em; }
.menu--link {
display: block;
position: relative;
font-size: 0.875em;
font-weight: 500;
color: #5a6473;
line-height: 1.3125;
text-decoration: none;
transition: all 0.2s ease-in-out; }
.menu--link:visited {
color: #5a6473; }
.menu--link::after {
display: block;
pointer-events: none;
position: absolute;
bottom: -0.7143em;
left: 0;
content: '';
width: 100%;
height: 0.143em;
background-color: #7f8a9b;
opacity: 0;
border-radius: 0.3571em;
transition: all 0.2s ease-in; }
.menu--link:hover {
color: #2d323a;
transform: scaleX(105%); }
.menu--link:hover::after {
bottom: -0.2143em;
opacity: 1; }
.menu--link:active {
color: #717d8f; }
.header--buttons {
display: flex;
column-gap: 1.125em; }
.button {
font-family: Poppins;
cursor: pointer;
padding: 0.7143em 1.43em;
border-radius: 0.57143em;
font-size: 0.875em;
font-weight: 500;
color: white;
line-height: 1.3125;
background-color: #0f1b4c;
transition: all 0.2s ease-in-out; }
.button:hover:not(.sign-up) {
background-color: #1c328c;
transform: scale(105%);
border-radius: 0.7143em; }
.sign-up {
background-color: transparent;
padding: 0;
color: #0f1b4c;
transition: all 0.2s ease-in-out; }
.sign-up:hover {
color: #1c328c;
transform: scale(110%); }
.hero {
position: relative;
background-color: #e6f0ff;
font-size: 16px; }
.hero--wrapper {
display: flex;
column-gap: 4.1875em;
padding-top: 7.125em; }
.hero--blok-left {
flex: 0 0 50.37%;
margin-top: 5.6875em; }
.hero--descr {
margin-bottom: 0.444em;
font-size: 1.125em;
font-weight: 500;
color: #687691;
line-height: 1.6875; }
.hero--title {
margin-bottom: 0.46875em;
font-size: 4em;
font-weight: 700;
color: #000336;
line-height: 1.1875; }
.hero--subtitle {
font-size: 1.125em;
font-weight: 400;
color: #5a6473;
line-height: 2;
margin-bottom: 2.222em; }
.hero--block-right {
display: flex;
align-items: flex-end; }
.hero--img {
width: 36.5em;
height: auto; }
.hero--img svg {
max-width: 100%;
height: auto; }
@media only screen and (max-width: 1024px) {
.header {
font-size: 14px; } }