Html 来自Figma don'；将它们移动到VSC时，不能正确对齐

我最近开始使用Figma设计网页。完成页面设计后，我导出了所有SVG文件，并将它们添加到HTML文档中。我去复制了Figma的CSS样式，但是所有的东西都超出了尺寸，导致了所有的东西都不合适

我试着用更大的高度/宽度重新设计它，但同样的问题发生了

我是否创建与显示器分辨率相同大小的Figma画布

代码笔：
菲格玛图书馆：

（上面板是重新设计的尝试，试图使SVG元素达到浏览器的大小。下面板是我认为合适的第一个面板）

无法在此处发布rest代码，因为由于SVG的1000多个字符计数之一，它超过了3000个字符的限制

---

index.css

body {
   
    font-family: 'Alata', sans-serif;
    background-color: #E5E5E5;

}

header {

    display: flex;

    position: absolute;
    width: 100%;
    height: 63px;
    left: 0px;
    top: 0px;
    
    background: #009ABC;
    box-shadow: 0px 4px 22px 4px rgba(0, 0, 0, 0.32);

}

.logo {
    
    width: 347px;
    height: 195px;
    left: -136px;
    top: -66px;
    position: absolute;

}

.upperTextContainer {

    position: absolute;
    width: 563px;
    height: 86px;
    left: 74px;
    top: 261px;    
    font-size: 62px;
    
    
    outline: none;
}

.lowerTextContainer {

    position: absolute;
    width: 780px;
    height: 82px;
    left: 74px;
    top: 359px;
    margin: 24px 0px 24px 0px;
    
    font-family: Alata;
    font-style: normal;
    font-weight: normal;
    font-size: 30px;
    line-height: 41px;
    
    color: #000000;
   
}

.coderIllustration {

    position: absolute;
    width: 594px;
    height: 451px;
    left: 170px;
    top: 509px;


}

.wave1 {
 
    position: absolute;
    width: 2191px;
    height: 854px;
    left: -34px;
    top: 106px;
    
    

} 

.wave2 {

    position: absolute;
    width: 2191px;
    height: 854px;
    left: -34px;
    top: 167px;
    
    

} 

.wave3 {

    position: absolute;
    width: 2191px;
    height: 854px;
    left: -34px;
    top: 247px;


}

---

向svg添加

preserveAspectRatio=“none”