Question: I have a image inputted in the css with the following code:

```
.imgtemp { 
          float:right; 
          top:0px; 
          left:0px; 
          overflow:visible; 
          width:100%;
        }

```

I have also added the div tag to the page so its displaying, but the image is wider than the div due to the design. How can I make it overflow the divs its in to get it correct. 

Thanks.

Answer: 
As Nelson said, overflow: hidden on your image won't help you. If you absolutely must have the container be smaller than the image inside it, you can use positioning (relative on the parent div, absolute on the image with a top and left of 0, for example) to ignore its parent's size. You'll want to use something other than % on the image, too, because the % will read off its parents size, which is counter-productive.

Or, did you mean you want the parent div to cut off the extra image?
```
.contact__section{ //  your container
    width: 100%;
    display: block;
    overflow: hidden; // hide in case your XL image is too high to keep other sections of page neat
}
.contact__flexbox{
    position: relative; // you may not need it
    display: block; // for mobile size, or none; if not want to display on mobile
    width: 1100px; // our container width
    max-width: 100%; // for mobile
    margin: 0 auto; // center it on page
    @include tablet{ // My personal media query, replace with yours for tablet + size
        display: flex;
        align-items: center;
        justify-content:space-evenly;
    }
}
.contact__image-xl{
    position: relative; // important
    display: flex;
    flex:1; // make de 2 columns same size for a split in the middle of screen
    // No need: overflow: visible;
    img{
        // VERY IMPORTANT:
        max-width: 1000%!important;

        position: absolute;
        right: 0; // if your image is on left, otherwise: left:0;
        width: 1200px; // your image at the size you want it to display
    }
}

```