Html 我有一个图像，这是运行到我的文字，甚至当我添加清晰：对

我正在使用我网站的移动设备视图。我在联系页面上。礼品图片（一个可点击的链接）在右边与我的联系信息相撞，在左边有一个很大的间隙，即使我将左边距设置为0。我为图像添加了clear right，为文本添加了clear left

此外，我还遇到了一个问题，本来应该在标题下的文本正在与标题碰撞，一些文本在标题上方，部分在标题下方。我已经为每个段落添加了一个单独的id，并为每个有效的段落添加了页边空白，但我相信一定有更有效的方法来处理这个问题。如果有，我会很感激用更好的方式学习

您会注意到，一个顶部边距设置为100px，另外两个设置为120px。出于某种原因，每一行都能得到下面的文本

这是在“自然主题”Wordpress模板中完成的

礼品图片的原始尺寸为：833✕ 715px

我试了一下宽度：5vw的礼物。它似乎不起作用。基本上，我想看看哪种方式最适合根据屏幕大小在页面上放置礼物图像

先谢谢你

/*联系页面*/
分区#第7页邮政区第7页邮政区{
背景图像：url（'https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-6/htmlcss1-img_tahoe.jpeg")重要,；
颜色：#C91216！重要；
字体大小：24px；
线高：27px；
}
分区#第7页邮政7页邮政区h2分区{
颜色：#C91216；
浮动：对；
字体大小：40px；
字体大小：粗体；
}
div#page-7.post-7.page div.postarea.右侧{
浮动：对；
显示：内联块；
文本对齐：右对齐；
清除：左；
}
分区#第7页邮政7页邮政区h1分区{
浮动：对；
清除：左；
颜色：#FFEC6C！重要；
字体大小：70px！重要；
}
picjj先生{
边缘顶端：40px；
}
.感觉自由{
颜色：黑色！重要；
位置：绝对位置；
底部：520px；
变换：旋转（-19度）；
字体大小：粗体；
最大宽度：300px；
左边距：80px；
}
.礼物{
位置：绝对位置；
底部：200px；
左边距：100px；
变换：旋转（8度）；
}
#地址1{
边缘顶部：100px；
清除：左；
}
#套房{
清除：左；
}
#gmail{
边缘顶部：120px；
清除：左；
}
#数{
边缘顶部：120px；
清除：左；
}
picjj先生{
边界：20px固体；
颜色：rgba（255236108,0.60）；
}
@媒体屏幕（最大宽度：320px）{
div#page-7.post-7.page
.礼物{
宽度：5vw；
左边距：0；
底部：300px；
浮动：左；
清楚:对,；
清晰：底部；
清晰：顶部；
左侧填充：0；
}
}
@介质（最大宽度：320px）{
div#page-7.post-7.page.redheaders{
字体大小：18px！重要；
}
}
@介质（最大宽度：320px）{
div#page-7.post-7.page.feelfree{
底部：400px；
浮动：左；
左边距：0；
最大宽度：80px；
}
}

接触
通讯地址

跳过几条街

安大略省多伦多99号套房

M5V 1B1

电子邮件地址

99100@email.com
电话号码

123-456-7890
请随时查看我的消费者页面，获取有趣的礼物：

添加屏幕上显示的碰撞快照。您的信息/文字难以理解。显示快照。我添加了一些屏幕截图。期待着某种指导。谢谢。：）