I’ve been trying for hours to make an image stretch across the full width of the screen but there’s always white space either on both sides or just the left side. Right now it’s on both sides

This is the code:

     <v-row>
        <v-col class="pa-0">
          <div class="image-container">
            <img
              src="@/assets/images/digitalsignature.jpg"
              alt="Digital Signature"
              class="full-width-image"
            />
    
            <div class="button-container">
              <v-btn rounded="lg" size="x-large" block class="d-flex align-center justify-center">
                Get started
                <v-icon right>mdi-arrow-right</v-icon>
              </v-btn>
            </div>
          </div>
        </v-col>
      </v-row>
    </template>
    
    <style scoped>
    .image-container {
      margin-top: 32px;
      position: relative;
      width: 100%;
      height: 500px;
      overflow: hidden;
    }
    
    .full-width-image {
    
      display: block;
      width: 100%;
      height: 100%;
      margin: 0;
      filter: blur(5px);
      object-fit: cover;
    }

I also have a button inside it and need it to be centered in the image. Right now it’s fine except that there’s a tiny amount of space on the sides