Why element is not taking the exact width that I tell with CSS?

I'm selecting an <img> element with CSS and applying a width to it, but, when I inspect the computed value of the generated element by the browser (the generated <img>), I see a different value.

Furthermore, I'm kind of confused, Am I specifying the width (with CSS) of the element's content-box instead the width of the image itself?

I'd share to you an example:

<div class="carousel-image carousel-image-fachada" id="mapaFachada"><img src="/images/slider/slide-home-mapa-fachada.png" alt="mapa norte-centro país Nexus" width="450" height="auto"></div>

.carousel-image-fachada {  @media (min-width: bulma.$desktop) {    display: flex;  }& > img {    @media (min-width: bulma.$widescreen) {      width: 700px;    }  }}

And this is the computed value of the generated element:

In this example, is not respecting the 700px. Instead, the final result is 515.297px wide.

How do I tell with CSS that this image should be exactly 700px?