Tags Move Unexpectedly

This is the second site I’ve had where tags will move around on me for no apparent reason.

URL: clairebarronpsychologist.com

Example 1: On the home page I’ve used the JQuery Expander Box plugin to display more content upon click. Here is the code used to execute that:

<h2 style="font-size: 150%; font-weight: normal; padding-bottom: 10px; color: black; margin: 0 0 .2125em; text-shadow: 2px 2px 3px #fff;">Focus Areas</h2>
<p style="text-align: left;">We work in the following areas (A-Z):</p>
<p style="margin-bottom: 0 !important;">» ADHD
» Adjustment disorders
» Adult/Child of alcoholic
» Anger management
» Anxiety issues
<code>[dropdown_box show_more="View More" show_less="View Less" start="hide"]

<div style="font-family: arial; font-weight: normal; font-size: 110% !important;">» Blended family/step-parent
» Behavioral problem
» Co-dependency
» Co-parenting
» Depression/mood disorder
» Divorce counseling
» Employment issues
» Family problems
» Health problems and behaviors
» Infidelity
» Life transition
» Parenting issues
» Personal growth
» Post-traumatic stress disorder
» Relationship issues
» Self-esteem
» Stress management
» Women’s issues</div>
[/dropdown_box]</code></p>

Note that after “Anxiety Issues” I start the plugin (using shortcode dropdown_box_show_more). Then at the end I end the shortcode and follow it with </code></p>. But every now and then the last code and p tag get moved up for no apparent reason and it breaks the plugin.

Example 2: This doesn’t just happen with plugins. I just had to fix an issue where the first part of a div tag seemed to erase itself, messing up that page.

I guess I could solve these problems if there was a way to ‘lock in’ the code so that it couldn’t be changed? Thanks so much for the help.