BootStrap 4

[ProgramadorBR]

HTML:

CSS:
#colproduto{

	text-align: center;
	margin-top: 3%;
	border: 1px solid #f3f3f3;
	height: 220px;
	margin-left: 2%;
	border-radius: 5px;
}

#colproduto img{
	padding-top: 5% !important;
	width: 170px;
	height:auto;
}
#colproduto:hover{
	 	-webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
}

Quero colocar um link para que quando clicar em qualquer lugar da div, ele ir para o link, até aí okay…

 <a href="maminha.html"><div id ="colproduto" class="col-lg-3 col-sm-12 col-md-3">
                <h4>Picanha</h4>
                <img class="img-fluid" src="carnes/picanha.png">
        </div></a>

colocando o link olha como fica:

como resolver? e fica no tamanha normal?

[vanribeiro]

Olha, fiz alguns testes e modificações e ficou assim aqui:

<div class="container">
    <div class="row">
       <!-- A div mais externa fica responsável pelas colunas-->
        <div class="col-lg-3 col-sm-12 col-md-3">
            <a href="maminha.html">
       <!-- A div mais interna fica responsável pelas formatação da imagem-->
                <div id ="colproduto">
                  <h4>Picanha</h4>
                  <img class="img-fluid" src="img/cow.png">
                </div>
              </a>
        </div>
    </div>
</div>

Meu CSS:

#colproduto{
    margin-top: 15px;
    text-align: center;
    padding: 15px;
    background-color: rgb(151, 76, 141);

}

Resultado:

Usando apenas container:

Usando container-fluid: