如何让网页元素精准匹配Canva设计稿？附HTML/CSS代码求助

需要将“绿色投资”页面还原为Canva设计稿样式，但当前存在以下问题：

• 文字在容器内但字号过大
• 图片及容器尺寸偏大且偏居页面右侧
• 顶部标题容器无法固定“Green Investment”标题位置
• 整体布局失调

以下是当前使用的HTML及CSS代码：

HTML代码 #

<html>
    <head>
        <title>Green Investment</title>
        <link href="file:///C:/xampp/htdocs/templatemo_591_villa_agency/styles.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div class="green-investment-title">
            <h1>Green Investment</h1>
        </div>
        <div class="green-content">
            <div class="green-text">
                <h2>Profit from the green revolution</h2>
                <p>Reduce your carbon foot print and make a positive impact on the environment and the community by investing in clean and green energy. Bali offers untaped green investment potential as the booming tourism industry draws an international crowd of  environmentally conscious people to the island who not only want to livre a healthy lifestyle being close to nature but also perserve it 

                    Despite the vast potential of being an ecohub the island’s consciousness towards the environment is poorly managed due to a mentality of  unhygienic lifestyle especially relating to waste disposal.  Passed down from generations, the people of Bali are taught that everything used in their daily life are easily disposed of by dumping them out in nature and in public places.  This sort of mentality exists because their ancestors haver grown accustomed to using everyday items made from natural materialks like wood and plant fiber. However times have changed as people use everyday items that are synthetically made that damage nature. Unfortunately the Balinese have not caught up to this change as they are still stuck with the outdated mindset of their ancestors. 
                    
                    This is where you, the investor come in. You can invest in building green businesses like solar farms, recycling plant, public parks and green spaces to instill a mentality of care for motherr nature. By doing this you will improve the island’s green image and gain more clients in thed process. To get updates on new green investments in Bali and other islands indoinesia, subscribe to our newsletter on the right. </p>
            </div>
            <div class="green-image-container">
            <img src="file:///C:/xampp/htdocs/templatemo_591_villa_agency/assets/images/solar%20cells.jpg">
            </div>
        </div>
    </body>    
</html>

CSS代码 #

.green-investment-title {
    width: 100%;
    height: 45px;
    background-color: #56aeff;
    display:flex;
}

.green-content{
    display: flex;
    flex-direction: row;
}

.green-text {
    justify-content: left;
    text-align: left;
    font-size: 20px;
    font-family: Arial;
}

.green-image-container{
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    border-bottom: 20px solid #fff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

1. 修复顶部标题定位 #

给标题容器添加垂直对齐属性，同时清除h1的默认边距，避免撑高容器：

.green-investment-title {
    width: 100%;
    height: 45px;
    background-color: #56aeff;
    display:flex;
    align-items: center; /* 垂直居中标题 */
    padding-left: 20px; /* 调整标题左侧间距，匹配设计稿 */
}
.green-investment-title h1 {
    margin: 0; /* 清除h1默认上下边距 */
    font-size: 20px; /* 根据设计稿调整字号 */
}

2. 调整文字容器的字号与布局 #

缩小文字字号，让文字容器占据合理空间，避免挤压图片：

.green-text {
    flex: 1; /* 让文字容器占据剩余可用空间 */
    text-align: left;
    font-size: 16px; /* 缩小字号，匹配设计稿 */
    font-family: Arial;
    padding: 0 20px; /* 添加左右内边距，避免文字贴边 */
}
.green-text h2 {
    font-size: 22px; /* 调整副标题字号 */
    margin-top: 0; /* 清除默认上边距 */
}

3. 修复图片容器与图片适配 #

调整容器尺寸，让图片自适应容器，同时固定容器宽度避免被压缩：

.green-image-container{
    width: 300px; /* 根据设计稿调整宽度 */
    height: 200px; /* 根据设计稿调整高度 */
    background-color: #f0f0f0;
    border-bottom: 20px solid #fff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    flex-shrink: 0; /* 防止容器被压缩 */
    margin-right: 20px; /* 添加右侧间距，避免贴边 */
}
.green-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 让图片自适应容器，保持比例 */
}

4. 全局样式重置 #

清除body默认边距，避免页面出现不必要的留白：

body {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
}

.green-investment-title {
    width: 100%;
    height: 45px;
    background-color: #56aeff;
    display:flex;
    align-items: center;
    padding-left: 20px;
}
.green-investment-title h1 {
    margin: 0;
    font-size: 20px;
}

.green-content{
    display: flex;
    flex-direction: row;
    padding: 20px 0; /* 添加上下内边距，优化整体布局 */
}

.green-text {
    flex: 1;
    text-align: left;
    font-size: 16px;
    font-family: Arial;
    padding: 0 20px;
}
.green-text h2 {
    font-size: 22px;
    margin-top: 0;
}

.green-image-container{
    width: 300px;
    height: 200px;
    background-color: #f0f0f0;
    border-bottom: 20px solid #fff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    flex-shrink: 0;
    margin-right: 20px;
}
.green-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

• 浏览器开发者工具（F12）：直接在页面上实时调试CSS，修改样式后可直接复制到本地文件，快速验证效果。
• 截图测量工具：如Windows的Snipaste、Mac的预览工具，可测量设计稿中的字号、容器尺寸、间距数值，精准还原设计。
• CSS重置库：如Normalize.css，统一不同浏览器的默认样式，避免默认边距、字号差异影响布局。

内容的提问来源于stack exchange，提问作者Samuel