How do I align the top elements in my three column Bootstrap collapsing accordion?

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">
            <a href="health-resources/mosquitoes.html"><h4>Mosquitoes</h4></a>
            <a href="health-resources/ticks.html"><h4>Ticks</h4></a>
            <a href="#"><h4>Bees and Wasps</h4></a>
            <a href="#"><h4>Animal Bites</h4></a>
        </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">
            <a href="#"><h4>Pet Allergies</h4></a>
            <a href="#"><h4>Toxic Plants</h4></a>
            <a href="#"><h4>Pet and Wildlife Encounters</h4></a>
        </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">
            <a href="#"><h4>This is a Topic</h4></a>
            <a href="#"><h4>Topic 2</h4></a>
            <a href="#"><h4>Another Topic</h4></a>
        </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">
            <a href="#"><h4>Bacterial</h4></a>
            <a href="#"><h4>Fungal</h4></a>
            <a href="#"><h4>Parasitic</h4></a>
            <a href="#"><h4>Prionotic</h4></a>
            <a href="#"><h4>Rickettsial</h4></a>
            <a href="#"><h4>Spirochetes</h4></a>
            <a href="#"><h4>Viral</h4></a>
        </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">
            <a href="#"><h4>Animal Allergies</h4></a>
            <a href="#"><h4>Environmental Allergies</h4></a>
        </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">
            <a href="#"><h4>This is a Topic</h4></a>
            <a href="#"><h4>Topic 2</h4></a>
            <a href="#"><h4>Another Topic</h4></a>
        </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

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">
                <a href="health-resources/mosquitoes.html"><h4>Mosquitoes</h4></a>
                <a href="health-resources/ticks.html"><h4>Ticks</h4></a>
                <a href="#"><h4>Bees and Wasps</h4></a>
                <a href="#"><h4>Animal Bites</h4></a>
            </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">
                <a href="#"><h4>Pet Allergies</h4></a>
                <a href="#"><h4>Toxic Plants</h4></a>
                <a href="#"><h4>Pet and Wildlife Encounters</h4></a>
            </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">
                <a href="#"><h4>This is a Topic</h4></a>
                <a href="#"><h4>Topic 2</h4></a>
                <a href="#"><h4>Another Topic</h4></a>
            </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">
                <a href="#"><h4>Bacterial</h4></a>
                <a href="#"><h4>Fungal</h4></a>
                <a href="#"><h4>Parasitic</h4></a>
                <a href="#"><h4>Prionotic</h4></a>
                <a href="#"><h4>Rickettsial</h4></a>
                <a href="#"><h4>Spirochetes</h4></a>
                <a href="#"><h4>Viral</h4></a>
            </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">
                <a href="#"><h4>Animal Allergies</h4></a>
                <a href="#"><h4>Environmental Allergies</h4></a>
            </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">
                <a href="#"><h4>This is a Topic</h4></a>
                <a href="#"><h4>Topic 2</h4></a>
                <a href="#"><h4>Another Topic</h4></a>
            </div>
        </div>
    </div>
		

</div>

Answer 2

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;
}