Chrome won't react to image resize - html

Question

I have a little problem. I created one simple web page and tested with Firefox - everything was fine. Then I realised I should test it with other browsers too and when I opened it in Chrome, every picture was in original size. When I try to modify with CSS ( height, width ) it won't react.
HTML:
<div class="picture">
<div id="first">
<ul class="gallery">
<li>
<a href="images/morning.png">
<img src="images/morning.png" alt="">
<p>Early morning in China</p>
</a>
</li>
<li>
<a href="images/night.png">
<img src="images/night.png" alt="">
<p>Night sky in Singapore</p>
</a>
</li>
<li>
<a href="images/nature.png">
<img src="images/nature.png" alt="">
<p>Nature road</p>
</a>
</li>
</ul>
</div>
<div id="second">
<ul class="gallery">
<li>
<a href="images/app.png">
<img src="images/app.png" alt="">
<p>Weather app for iOS</p>
</a>
</li>
<li>
<a href="images/cold.png">
<img src="images/cold.png" alt="">
<p>Cold winter evening</p>
</a>
</li>
<li>
<a href="images/bugs.png">
<img src="images/bugs.png" alt="">
<p>Little bugs on the field</p>
</a>
</li>
</ul>
</div>
</div>
CSS:
/********* WORKS **********/
.gallery {
list-style: none;
margin-right: 35;
margin-top: 30;
}
.gallery img {
width: 250;
height: 250;
}
#media screen and (min-width: 720px) {
.flex {
display: -ms-flexbox; /* TWEENER - IE 10 */
display: flex;
max-width: 1200px;
-ms-flex-pack: distribute;
justify-content: space-around;
margin: 0 auto;
}
.gallery {
margin-top: 40;
margin-bottom: 50;
}
#first {
width: 50%;
float: left;
}
#second {
width: 50%;
float: right;
}
.gallery img {
width: 320;
height: 320;
}
}
I know my indentation is shit at the moment, so, sorry.

Answer 1

chrome will work with unit like px or % try with px.