I'd like to have an image within multiple div's to be full-width.

I did some research in previous answers concerning this topic but it somehow didn't work out for me. So here's my situation:

On the page <https://maisoncyclo.ch/collections/de-marchi> I'd like to have the top image to be full-width up to it's original size (max 100%, 2048x2048px). The problem is that this image is within a `<p>` and a content-div and therefore respects the margins of its parents.

**What's the solution to make this image full-width to the users browser size?**

If I add a new CSS-Class for this type of image, what CSS code is required for this element?

**Current HTML:**

```
<div id="collection-description" class="desktop-push-2 desktop-8 tablet-6 mobile-3">

<div class="rte">
<p style="text-align: left;"><img src="//cdn.shopify.com/s/files/1/1129/3176/files/DEMARCHI_Header_2048x2048.jpg?9976235918523909588" alt="De Marchi Italien"></p>

```

**Current CSS:**

```
img {
    max-width: 100%;
    border: 0;
}
* {
    margin: 0;
}
*, *:after {
    box-sizing: border-box;
}
Inherited from p
Style Attribute {
    text-align: left;
}
p {
    font-size: 16px;
    margin-bottom: 2em;
}

Inherited from div.rte
.rte {
    text-align: left;
}
Inherited from body.gridlock.collection
body {
    color: #000000;
    background: #ffffff;
    font-size: 16px;
    font-family: Nitti Light, Courier, monospace;
    line-height: 1.5em;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;`

```

Best,
Daniel