All images resize except for one


#1

So, I already finished the project the way it was supposed to be.
But now I want my images to resize when the browser is made smaller.

Problem is, that the icon images all resize, but the catcolor.img is the only one that doesn’t resize.
Can anyone explain to me why all the other images do resize, but not this one?
All the images have the same border color & size. When I change it to black using CSS, all the borders on the images, including catcolor.img, change to black.

CSS

.jumbotron img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	border-radius: 10px;
	border: 4px solid white;
    max-width: 100%;
    height: auto;
}

HTML Code

<div class="jumbotron">
			<div class="container-fluid">
				<div class="row">
					<div class="col-md-8">
						<h1>TITLE</h1>
						<p id="nopadding">SUBTITEL</p>
						<a href="#" class="btn btn-default">Go to latest creation</a>
					</div>
					<div class="col-md-3">
                        <img src="img/catcolor.jpg">
					</div>
					<div class="col-md-1">
						<ul class="contact">
							<li><a href="#" target="_blank" ><img src="img/usedicons/linkedin.png" height="35" width="35"></a></li>
							<li><a href="#" target="_blank" ><img src="img/usedicons/instagram.png" height="35" width="35"></a></li>
							<li><a href="#" target="_blank" ><img src="img/usedicons/wordpress.png" height="35" width="35"></a></li>
							<li><a href="#" target="_blank" ><img src="img/usedicons/pinterest.png" height="35" width="35"></a></li>
							<li><a href="#" target="_blank" ><img src="img/usedicons/flickr.png" height="35" width="35"></a></li>
							<li><a href="#" target="_blank" ><img src="img/usedicons/gmail.png" height="35" width="35"></a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>