How do I align the top elements in my three column Bootstrap collapsing accordion? - twitter-bootstrap-3

Question

I made a three column accordion collapse using Bootstrap. I used images as backgrounds for my panels, but I am really stumped as to why the top picture is not lined up with the others. How do I get them all to line up? Also, is there a way to make the transitions not so awkward and shifty? Thanks in advance!
I have been building my website in Dreamweaver, but this is the code for what I have been working on and what is giving me issues.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4 bites-stings">
<div class="panel-heading" role="tab" id="headingSeven">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
<h2>Bites and Stings</h2>
</a>
</div>
<div id="collapseSeven" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSeven">
<div class="panel-body">
<h4>Mosquitoes</h4>
<h4>Ticks</h4>
<h4>Bees and Wasps</h4>
<h4>Animal Bites</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 pet-health">
<div class="panel-heading" role="tab" id="headingTwo">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h2>Pet Health and Safety</h2>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<h4>Pet Allergies</h4>
<h4>Toxic Plants</h4>
<h4>Pet and Wildlife Encounters</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 livestock-health">
<div class="panel-heading" role="tab" id="headingThree">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h2>Livestock Health and Safety</h2>
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<h4>This is a Topic</h4>
<h4>Topic 2</h4>
<h4>Another Topic</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 zoonotic">
<div class="panel-heading" role="tab" id="headingFour">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
<h2>Zoonotic Diseases</h2>
</a>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<h4>Bacterial</h4>
<h4>Fungal</h4>
<h4>Parasitic</h4>
<h4>Prionotic</h4>
<h4>Rickettsial</h4>
<h4>Spirochetes</h4>
<h4>Viral</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 allergies">
<div class="panel-heading" role="tab" id="headingFive">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
<h2>Allergies</h2>
</a>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<h4>Animal Allergies</h4>
<h4>Environmental Allergies</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 environment-health">
<div class="panel-heading" role="tab" id="headingSix">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
<h2>Environmental Health</h2>
</a>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
<div class="panel-body">
<h4>This is a Topic</h4>
<h4>Topic 2</h4>
<h4>Another Topic</h4>
</div>
</div>
</div>
my css
#accordion {
margin-top: 98px;
align-items: flex-start;
}
#accordion .panel {
border-width: 0;
padding: 0 !important;
border-radius: 0%;
}
#accordion .panel-heading {
height: 300px;
text-align: center;
color: #fff;
padding-top: 14%;
border-radius: 0%;
background-color: transparent !important;
align-items: flex-start;
}
#accordion .panel-heading h2 {
color: #fff;
}
#accordion .bites-stings {
background: url(http://chelmsfordmosquitocontrol.com/wp- content/uploads/2014/08/Mosquito-Bites.jpg) center center no-repeat;
background-size: cover;
}
#accordion .pet-health {
background: url(http://www.elainedecarlo.com/cats_dogs_2.jpg) center center
no-repeat;
background-size: cover;
}
#accordion .livestock-health {
background:
url(http://img11.nnm.me/0/f/c/2/2/849b5f5d84fed8199e0f71944dc.jpg) center
center no-repeat;
background-size: cover;
}
#accordion .allergies {
background:
url(http://www.westnebraska.com/cc-ChadronSP_FallColor_RickNeibel.jpg)
center center no-repeat;
background-size: cover;
}
#accordion .zoonotic {
background:
url(https://markingourterritory.files.wordpress.com/2015/01/20-92.jpg)
center center no-repeat;
background-size: cover;
}
#accordion .environment-health {
background:
url(http://www.keepmyplanetgreen.com/wp-content/uploads/2014/06/06-05-10- wind-turbines-stubble-field-and-storm-clouds-wtrmrk.jpg) bottom no-repeat;
background-size: cover;
}
#accordion .panel-collapse {
background-color: rgba(255,255,255,0.9);
}
#accordion .panel-body {
padding-top: 20px;
padding-bottom: 30px;
text-align: center;
}
http://codepen.io/aahmed2/pen/yOQvVz

Answer 1

Because this specific rule in bootstrap.min.css is being applied to all panels except your first one that is misaligned. Specifically because .panel+.panel means to apply to all .panel elements after another .panel element therefore, it being the first one has no predecessor .panel to target it.
.panel-group .panel+.panel{
margin-top: 5px;
}

Answer 2

As an alternative to #lamelemon's answer, you could try overriding the .panel + .panel rule in bootstrap.min.css by using this one instead.
.panel-group > .panel{
margin-top: 5px;
}
It means apply it to all first-level .panel that children of .panel-group.
You would add this rule at the end of your own CSS (as defined above)
(see updated code below - full page should show the desired effect)
#accordion {
margin-top: 98px;
align-items: flex-start;
}
#accordion .panel {
border-width: 0;
padding: 0 !important;
border-radius: 0%;
}
#accordion .panel-heading {
height: 300px;
text-align: center;
color: #fff;
padding-top: 14%;
border-radius: 0%;
background-color: transparent !important;
align-items: flex-start;
}
#accordion .panel-heading h2 {
color: #fff;
}
#accordion .bites-stings {
background: url(http://chelmsfordmosquitocontrol.com/wp-content/uploads/2014/08/Mosquito-Bites.jpg) center center no-repeat;
background-size: cover;
}
#accordion .pet-health {
background: url(http://www.elainedecarlo.com/cats_dogs_2.jpg) center center no-repeat;
background-size: cover;
}
#accordion .livestock-health {
background:url(http://img11.nnm.me/0/f/c/2/2/849b5f5d84fed8199e0f71944dc.jpg) center center no-repeat;
background-size: cover;
}
#accordion .allergies {
background:url(http://www.westnebraska.com/cc-ChadronSP_FallColor_RickNeibel.jpg) center center no-repeat;
background-size: cover;
}
#accordion .zoonotic {
background:url(https://markingourterritory.files.wordpress.com/2015/01/20-92.jpg) center
center no-repeat;
background-size: cover;
}
#accordion .environment-health {
background:url(http://www.keepmyplanetgreen.com/wp-content/uploads/2014/06/06-05-10-wind-turbines-stubble-field-and-storm-clouds-wtrmrk.jpg) bottom no-repeat;
background-size: cover;
}
#accordion .panel-collapse {
background-color: rgba(255,255,255,0.9);
}
#accordion .panel-body {
padding-top: 20px;
padding-bottom: 30px;
text-align: center;
}
.panel-group > .panel{
margin-top: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4 bites-stings">
<div class="panel-heading" role="tab" id="headingSeven">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
<h2>Bites and Stings</h2>
</a>
</div>
<div id="collapseSeven" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSeven">
<div class="panel-body">
<h4>Mosquitoes</h4>
<h4>Ticks</h4>
<h4>Bees and Wasps</h4>
<h4>Animal Bites</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 pet-health">
<div class="panel-heading" role="tab" id="headingTwo">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h2>Pet Health and Safety</h2>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<h4>Pet Allergies</h4>
<h4>Toxic Plants</h4>
<h4>Pet and Wildlife Encounters</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 livestock-health">
<div class="panel-heading" role="tab" id="headingThree">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h2>Livestock Health and Safety</h2>
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<h4>This is a Topic</h4>
<h4>Topic 2</h4>
<h4>Another Topic</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 zoonotic">
<div class="panel-heading" role="tab" id="headingFour">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
<h2>Zoonotic Diseases</h2>
</a>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<h4>Bacterial</h4>
<h4>Fungal</h4>
<h4>Parasitic</h4>
<h4>Prionotic</h4>
<h4>Rickettsial</h4>
<h4>Spirochetes</h4>
<h4>Viral</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 allergies">
<div class="panel-heading" role="tab" id="headingFive">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
<h2>Allergies</h2>
</a>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<h4>Animal Allergies</h4>
<h4>Environmental Allergies</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 environment-health">
<div class="panel-heading" role="tab" id="headingSix">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
<h2>Environmental Health</h2>
</a>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
<div class="panel-body">
<h4>This is a Topic</h4>
<h4>Topic 2</h4>
<h4>Another Topic</h4>
</div>
</div>
</div>
</div>