Html CSS部分重叠，图像不居中

我正在尝试制作一个简单的网页，但在CSS方面遇到了一些问题。 我的第一个问题是headerImg没有显示在浏览器的全宽范围内，并且右边有一个很小的边距，我似乎不知道为什么

我的第二个问题是#work.部分中的图像，它们与#contactMe部分重叠，无法找到将它们居中的方法，使其成为页面中心2列中的所有4个图像。无论我做什么改变，他们都会一直拉到页面的左侧

最后，我找不到一种方法使标记能够响应浏览器中的更改，以便即使在浏览器更改大小时，它们都显示在标题中

谢谢你，我是CSS的新手，非常讨厌它，哈哈

@font-face{font-family:Cherolina；src:url（'./Fonts/coolvetica.ttf'）；}
@字体面{font-family:Roboto；src:url（'./Fonts/Roboto-Thin.ttf'）；}
@字体面{font-family:RobotoR；src:url（'./Fonts/Roboto-Regular.ttf'）；}
：根{
--白色：#ffffff；
--黑暗：#90323d；
}
* {
框大小：边框框；
填充：0；
保证金：0；
}
身体{
背景色：#f8edeb；
}
标题{
填充：2%；
字体家族：Cherolina；
背景色：var（--暗）；
颜色：var（--白色）；
}
收割台h1{
显示：内联块；
字体大小：70px；
左边距：20px；
边缘底部：10px；
}
标题部分{
填充顶部：40px；
浮动：对；
字体系列：Roboto；
字体大小：20px；
}
标题部分ul{
列表样式类型：无；
}
标题部分ul li{
显示：内联块；
左边距：25px；
}
海德里姆先生{
保证金：0；
宽度：100%；
高度：150像素；
溢出：隐藏；
不透明度：70%；
}
标题部分a{
颜色：var（--白色）；
文字装饰：无；
}
p{
字体大小：20px；
}
.向左浮动{
浮动：左；
右边距：25px；
}
.向右浮动{
浮动：对；
左边距：25px；
}
.部分{
保证金：50px 50px 50px 50px；
宽度：90%；
高度：500px；
显示：内联块；
}
.第p节{
字体系列：roboto；
边缘顶部：50px；
文本对齐：对齐；
左边距：110像素；
宽度：40%；
显示：内联块；
}
.含量h2{
字体家族：cherolina；
颜色：var（--深色）；
字体大小：60px；
裕度：0 100px 0 100px；
边框底部：2px实心变量（--白色）；
}
.内容{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
.内容img{
宽度：550px；
高度：360px；
背景尺寸：封面；
保证金：50px 0 50px 0；
}
.内容ul{
列表样式类型：无；
背景色：rgba（255255.70）；
身高：30%；
边缘顶部：90像素；
}
李先生{
显示：内联；
字体系列：roboto；
保证金：70px 50px 50px 50px；
浮动：对；
}
.内容a{
文字装饰：无；
颜色：黑色；
边框底部：.5px纯黑色；
字体大小：20px；
}
#工作{
边框底部：0px；
}
#第一网{
显示：块；
宽度：90%；
左边距：自动；
右边距：自动；
边缘顶部：150px；
浮动：无；
不透明度：100%；
柔性包装：nowrap；
}
.工作{
显示：内联块；
列数：2；
页边距底部：0；
边际上限：0；
不透明度：100%；
} 
.mg:悬停{
不透明度：70%；
}
#firstWeb：悬停{
不透明度：70%；
}
页脚{
填充：30px；
明确：两者皆有；
文本对齐：居中；
字体家族：Cherolina；
背景色：var（--暗）；
}
页脚h2{
字体大小：20px；
颜色：var（--白色）；
}

文件夹
先生








关于我

Lorem ipsum dolor sit，amet Concertetur Adipising Elite。例如，在临时立法会上，我要明确地说，这是一个极大的挑战！伊萨姆！

工作
联系我






@gmail.com


55XXXX


用❤️️

您能检查一下下面的代码吗？希望它对你有用

第一个问题的解决方案是，您需要给出

宽度：100%

和

高度：100%编码到图像（.headerImg img），以便图像覆盖浏览器的整个宽度

您已为创建问题并与另一节内容重叠的所有节指定了fix

height:500px

。您可以设置

min height:500px

，以解决重叠问题

在“工作”部分中，您希望在页面中心的2列中显示所有4个图像，只需将4个图像包装在一个div中，使用flex实用程序类，您就可以对齐图像并将其保持在页面中心

注意：要将图像居中并并排对齐，请参阅“flex”属性，它将帮助您根据需要对齐内容

当浏览器大小更改时，您可以使用媒体查询使内容响应

请参阅此链接：

@font-face{font-family:Cherolina；src:url（'./Fonts/coolvetica.ttf'）；}
@字体面{font-family:Roboto；src:url（'./Fonts/Roboto-Thin.ttf'）；}
@字体面{font-family:RobotoR；src:url（'./Fonts/Roboto-Regular.ttf'）；}
：根{
--白色：#ffffff；
--达尔