Too much space on box - HTML - html

Question

I created a box here.
but the space is too much on the top and the bottom.
See image here:
How can I remove the extra spacing between top and bottom of the:
1.Title and the date
2. The button and the text
3. The button and the extra spacing below
Here's my HTML:
<div class="col-1-3"><img src="http://www.iliveaccountable.com/wp-content/uploads/2016/11/iliveaccountable.jpg" alt="" />
<h3 style="font-family: 'Montserrat'; text-align: center;">TAKING IT TO THE SOURCE</h3>
<h4 style="font-family: 'Montserrat'; text-align: center;">11/13/2016</h4>
<a href="http://www.iliveaccountable.com/oldsite/iliveconnected-patterns/" target="_blank">
<button class="btn btn-block btn-primary">Watch Video</button>
</a>
</div>
Here's my CSS:
h4 {
text-align: center;
}
.col-1-3 {
padding: 10px;
width: 28%;
float: left;
margin: 1%;
border: 1px solid #dedede;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.col-1-3 img {
width: 100%;
}
.btn-block{
display: block;
width: 100%;
}
#media only screen and (max-width: 767px) {
.col-1-3 {width: 44%;}
}
#media only screen and (max-width: 590px) {
.col-1-3 {width: 94%;}
}
I just want to have enough space but this spacing are too much.

Answer 1

Make margin and padding 0 for all elements within div.col-1-3
check this snippets
h4 {
text-align: center;
}
.col-1-3 * {
padding: 0;
margin: 0;
}
.col-1-3 {
width: 28%;
float: left;
margin: 1%;
border: 1px solid #dedede;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.col-1-3 img {
width: 100%;
}
a {
margin: 0;
}
h3 {
margin: 0;
}
h4 {
margin: 0;
}
.btn-block {
display: block;
width: 100%;
}
#media only screen and (max-width: 767px) {
.col-1-3 {
width: 44%;
}
}
#media only screen and (max-width: 590px) {
.col-1-3 {
width: 94%;
}
}
<div class="col-1-3">
<img src="http://www.iliveaccountable.com/wp-content/uploads/2016/11/iliveaccountable.jpg" alt="">
<h3 style="font-family: 'Montserrat'; text-align: center;">TAKING IT TO THE SOURCE</h3>
<h4 style="font-family: 'Montserrat'; text-align: center;">11/13/2016</h4>
<p>
<a href="http://www.iliveaccountable.com/oldsite/iliveconnected-patterns/" target="_blank">
<button class="btn btn-block btn-primary">Watch Video</button>
</a>
</p>
</div>
Hope it helps

Answer 2

Create additional CSS rules for h3, h4 and btn-block in which you define settings for margin-top and margin-bottom. Start with value 0 for all and increase the values until you are satisfied with the result.
ADDITION after comments:
1.) you have an empty p tag between the image and the h3
2.) You have a CSS rule for all p tags with a bottom margin of 20px (on line 278 of "style.css")