Figmaで出力したコードを上手く適応できない。

前提・実現したいこと

現在、WEBAPIを開発しておりデザインツール「Figma」を利用してUIを作成しています。
作成したUIを、Figmaの標準機能であるCSSコードの出力と追加のプラグインである「Figma to HTML」を
利用したHTMLコードの出力を組み合わせて実現しようとしています。

しかし、試しにHTMLファイルに書き出してみたところ、レイアウトが崩れてしまい
思う様なUIにはなりませんでした。

Figmaから出力されるコードを利用して、Figmaで作成した通りのデザインを再現するには
どのようにすればよいでしょうか？
ご教授して頂けると幸いです。

一応以下に、現状のコードを記述します。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>test_page</title>
    <style type="txt/css">
        /* Figmaから取得したCSSコード */
        .Rectangle1{
        width: 375px;
        height: 75px;
        left: 0px;
        top: 738px;
        background: #FFFFFF;}

        /*以下、同じ様にスタイルが記述されている*/

    </style>
</head>
<body>
<!-- Figma to HTML で取得したコード -->
<div class="Rectangle1" style="width: 375px; height: 100px; background-color: rgba(143.79, 192.78, 238, 1);"/>
<p class="テストページ" style="width: 261px; height: 52px; font-size: 36px; line-height: 100%; text-align: center; color: black;">テスト</p>
<div class="Line1" style="width: 342px; height: 3px; border-style: solid; border-width: 2px; border-style: solid; border-color: rgba(53.30, 123.36, 228.44, 1);"/>
<div class="Rectangle3" style="width: 341px; height: 219px; background-color: rgba(196, 196, 196, 1); border-radius: 8px;"/>
<div class="Rectangle5" style="width: 155px; height: 127px; background-color: rgba(196, 196, 196, 1);"/>
<!-- 同じように続く -->

</body>
</html>