Html 使用右边框定位图像创建空白区域

这是在以下位置之后：

我希望一些边框会像这样在屏幕中“吞下”，但不会在屏幕右侧产生溢出：

边界造成了这个差距，但我不想解决这个问题。浮动、相对、边际、绝对仍然没有帮助。我能做什么？ 同样，溢出-x:hidden也没有帮助

<div>
<main>
            <img id="logo" src="Logo.png" alt=""/>

            <div id="purpuleLineBox">
                <div id="purpuleLine1"> <p>100% recyclable and bio-degradable</p> </div>
                <div id="purpuleLine2"> <p>Simulates the natural ripening process, organic</p> </div>
                <div id="purpuleLine3"> <p>The quickest way to achieve the  perfect avocado taste</p> </div>
                <div id="purpuleLine4"> <p>Work with Mango, Banana, Peach, and another climacteric fruits</p> </div>
                <div id="purpuleLine5"> <p>The user interface on the bag shows when an avocado is fully ripen</p> </div>
            </div>
        </main>
</div>

---

为什么正确：-40px？为什么溢出-x:hidden不起作用？在主标记上应用隐藏溢出

body {
    margin: 0 auto;
}

#divStyle1 {
    height: 90vh;
    background-color: #016087;
}

#divStyle2 {
    height: 10vh;
    background-color: #1D232F;
}

#logo {
    transform: rotate(5deg);
    border: 10px dashed black;
    position: absolute;
    right: -40px;
}