CSS - hiding the overflow of an image isn't working - php

Question

I have a problem with my website banner. When I view my banner image on a phone screen, the text on the banner is too small to see. Due to this, I made the width of my image 120% (on CSS) so the text would be larger on a phone screen. When I did this, the banner just extended longer than the website length - but I want the excess banner to be cut off. I tried to solve this by using 'overflow: hidden' but it didn't work. Ultimately, I just want to crop the excess length off my banner but I don't know how.
HTML:
<div class="content">
<div class="banner">
<img src="images/large_banner.png" width="1440" height="80" alt="Sister banner"/>
</div>
</div>
CSS:
#media only screen and (max-width: 550px){
.banner{
height: auto;
width: 120%;
overflow: hidden;
}
}

Answer 1

You put width to the wrong place. You should paste height and width for image and put overflow: hidden; to div .banner.
Here's an example
img{
width:100%;
}
#media only screen and (max-width: 480px){
.content{
width:360px;
margin:0 auto;
}
.banner{
width:90%;
margin: 0 auto;
overflow: hidden;
}
.banner img{
width: 250%;
margin-left:-138px;
}
}
<div class="content">
<div class="banner">
<img src="http://man-centr.uz/image/cache/catalog/slider/slider2-1920x641.jpg" alt="Sister banner"/>
</div>
</div>