Having trouble adjusting the top margin to match the left and right margins between items. How can I narrow the top gap so it aligns with the spacing of each bootstrap button? https://i.stack.imgur.com/1dZEC.jpg
html
<div ng-controller="RecipeController">
<div class="row">
<div class="col-md-offset-5">
<form class="form-inline">
<input ng-model="query" type="text" class="form-control"
placeholder="Search Chicken Recipes" autofocus>
</form>
<div class="row">
<div ng-repeat="recipe in ChickenRecipes | limitTo: -16 | filter:query | orderBy: 'name' ">
<div class="col-md-3">
<div class="row top-buffer"> </div>
<button class="btn btn-primary btn-lg" ng-click="open(recipe)"><img ng-src="{{recipe.image}}" alt="recipeImage" class="recipeImage"/><br>{{ recipe.name }}</button> <br />
</div>
</div>
</div>
</div><!--end recipeController-->
</div><!--end container-->
app.css
#header{
font-family: Century Gothic, sans-serif;
color:red;
margin-left:auto;
margin-right:auto;
width:70%;
font-weight:bold;
font-size:30px;
}
.row{
margin:0 auto;
}
.hrstyle {
height: 30px;
border-style: solid;
border-color: #8c8b8b;
border-width: 4x 0 0 0;
border-radius: 40px;
}
.hrstyle:before {
display: block;
height: 30px;
content: "";
margin-top: -31px;
border-style: solid;
border-color: #8c8b8b;
border-width: 0 0 4px 0;
border-radius: 40px;
}
.links{
font-size:24px;
margin-top:-24px;
}
.col-md-4{
margin:0 auto;
text-align:center;
line-height: 1.2;
}
/*Dialog CSS*/
.ng-modal-overlay {
/* A dark translucent div that covers the whole screen */
position:absolute;
z-index:9999;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000000;
opacity: 0.8;
}
.ng-modal-dialog {
/* A centered div above the overlay with a box shadow. */
z-index:10000;
position: absolute;
width: 50%; /* Default */
/* Center the dialog */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
background-color: #fff;
box-shadow: 4px 4px 80px #000;
}
.ng-modal-dialog-content {
padding:10px;
text-align: left;
}
.ng-modal-close {
position: absolute;
top: 3px;
right: 5px;
padding: 5px;
cursor: pointer;
font-size: 120%;
display: inline-block;
font-weight: bold;
font-family: 'arial', 'sans-serif';
}
.recipeImage{
width:240px;
height:180px;
margin-left:auto;
margin-right:auto;
}
.recipeImageModal{
width:240px;
height:180px;
margin-left:auto;
margin-right:auto;
float:left;
}
.top-buffer { margin-top:30px; }
h3{
text-align:center;
color:red;
font-weight:bold;
}
h2{
font-weight:bold;
text-align:center;
}
ul
{
list-style-type: none;
font-weight:bold;
}
.modal-body{
height:600px;
}
ingredients{
font-weight:bold;
}
li{
}
.ingredientsTitle{
color:red;
}