Q:

Why doesn't this div apply its height and width properties?

I have some images, each one inside their parent div. 
When I try to set the width and height of the parent div, it does not change size. Why? How can I set its size?
Codepen of the below:

.SNSicon {
  width: 600px;
  height: 600px;
  display: inline;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  background-color: red;
}
.SNSicon img {
  display: inline;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  outline: none;
  border-radius: 5px;
  background-color: rgba(242, 99, 34, 1);
  color: #F2F2F2;
  border-color: black;
  opacity: .9;
}
<div class="SNScontainer">
  <div class="SNSicon">
    <img src="http://isaacmalca.com/paginaPrueba/img/socialMediaIcons/facebook.svg" />
  </div>
  <div class="SNSicon">
    <img src="http://isaacmalca.com/paginaPrueba/img/socialMediaIcons/pinterest.svg" />
  </div>
  <div class="SNSicon">
    <img src="http://isaacmalca.com/paginaPrueba/img/socialMediaIcons/instagram.svg" />
  </div>
  <div class="SNSicon">
    <img src="http://isaacmalca.com/paginaPrueba/img/socialMediaIcons/twitter.svg" />
  </div>
</div>

A:

Here you go: CodePen

.SNSicon {
  width: 600px;
  height: 600px;
 display: inline-block;
 border-radius: 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
  background-color: red;
}

.SNSicon img {
 display: block;
 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
    outline: none;
 border-radius: 5px;
 background-color: rgba(242,99,34,1);
 color: #F2F2F2;
 border-color: black;
 opacity: .9; 
  width: 100%;
  height: 100%
}
<div class="SNScontainer">
         <div class="SNSicon">
    <img src="http://isaacmalca.com/paginaPrueba/img/socialMediaIcons/facebook.svg"/>
         </div>
         <div class="SNSicon">
    <img src="http://isaacmalca.com/paginaPrueba/img/socialMediaIcons/pinterest.svg"/>
         </div>
         <div class="SNSicon">
    <img src="http://isaacmalca.com/paginaPrueba/img/socialMediaIcons/instagram.svg"/>
         </div>
         <div class="SNSicon">
    <img src="http://isaacmalca.com/paginaPrueba/img/socialMediaIcons/twitter.svg"/>
         </div>
</div>

Use display: inline-block instead of display: inline for <div class="SNSicon"> and use display: block instead of display: inline for .SNSicon img. You can also set the width and height of .SNSicon img to 100% so that it takes the dimensions of its parent <div>.

