Can anyone figure out why this is displaying bizarrely? [on hold]
I have a page built out so that people can see each of these accessories and filter out based on preference. Why is the 7th box displaying on the right? When you filter, it's not displaying like that. I have no idea why it's doing that and I've been working way too long trying random things to fix it. I know I need to include code otherwise someone will flag me, but on the page is the best way to see it behaving. A Jsfiddle will not work http://teetertv2.staging.wpengine.com/accessories/
My code:
<div id="parent" style="
float: left;
">
<div class="box accessory">
<h2 class="accessory-title-top" data-fontsize="25" data-lineheight="30"><a href="http://teetertv.com/comfort-cushion/" target="_blank">Comfort Cushion</a></h2>
<div class="container-overlay">
<div class="content">
<div class="content-overlay">
<a href="http://teetertv.com/comfort-cushion/" target="_blank"></a>
</div>
<a href="http://teetertv.com/comfort-cushion/" target="_blank"> <img class="content-image" src="https://teetertv.com/wp-content/uploads/2017/04/teeter-comfort-cushion.jpg" alt="Teeter Hang Ups Comfort Cushion for Inversion Table"></a>
<div class="content-details fadeIn-bottom">
<div class="content-text">
<a href="http://teetertv.com/comfort-cushion/" target="_blank">
<ul style="color: #fff; text-align: left; font-size: 15px;">
<li>Thick, supportive foam</li>
<li>Contoured shape</li>
<li>Node-style attachments</li>
<li>Smooth microfiber surface</li>
</ul>
</a>
</div>
</div>
</div>
</div>
<a class="product-detail" href="http://teetertv.com/comfort-cushion/" target="_blank"><i class="fa fa-list"></i> Details</a><section class="one-page-shopping-section one-page-shopping-add-to-cart"> <p class="product woocommerce add_to_cart_inline " style="border:4px solid #ccc; padding: 12px;">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>49.99</span>
<a rel="nofollow" href="/accessories/?add-to-cart=23843" data-quantity="1" data-product_id="23843" data-product_sku="EP1450" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>
</p></section>
</div>
<div class="box stretch" style="display: block;">
<h2 class="accessory-title-top" data-fontsize="25" data-lineheight="30">Core Restore</h2>
<div class="container-overlay">
<div class="content">
<div class="content-overlay">
</div>
<img class="content-image" src="https://teetertv.com/wp-content/uploads/2017/07/CR1001_400px-1.png" alt="Teeter Hang Ups Core Restore for Lumbar Support">
<div class="content-details fadeIn-bottom">
<div class="content-text">
<ul style="color: #fff; text-align: left; font-size: 15px;">
<li>Lumbar Support</li>
<li>Active Sitting Cushion</li>
<li>Balance Trainer</li>
<li>Improve Posture</li>
<li>Strenthen Muscle Tone</li>
</ul>
</div>
</div>
</div>
</div>
<a class="product-detail" href="#" style="pointer-events: none;color: #fff!important;"><i class="fa fa-list"></i> Details</a><section class="one-page-shopping-section one-page-shopping-add-to-cart"> <p class="product woocommerce add_to_cart_inline " style="border:4px solid #ccc; padding: 12px;">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29.99</span>
<a rel="nofollow" href="/accessories/?add-to-cart=32475" data-quantity="1" data-product_id="32475" data-product_sku="CR1001" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>
</p></section>
</div>
<div class="box accessory">
<h2 class="accessory-title-top" data-fontsize="25" data-lineheight="30"><a href="https://teetertv.com/deluxe-ez-reach-handle/" target="_blank">Deluxe EZ-Reach <span style="font-size:0.5em;vertical-align:super; line-height:0;"><sup>TM</sup></span>Ankle System</a></h2>
<div class="container-overlay">
<div class="content">
<div class="content-overlay">
<a href="https://teetertv.com/deluxe-ez-reach-handle/" target="_blank"></a>
</div>
<a href="https://teetertv.com/deluxe-ez-reach-handle/" target="_blank"><img class="content-image" src="https://teetertv.com/wp-content/uploads/2017/04/teeter-deluxe-ez-reach.jpg" alt="Teeter Hang Ups Deluxe Ez-Reach Ankle System for Inversion Tables"></a>
<div class="content-details fadeIn-bottom">
<div class="content-text">
<a href="https://teetertv.com/deluxe-ez-reach-handle/" target="_blank">
<ul style="color: #fff; text-align: left; font-size: 15px;">
<li>Ergo-Embrace Supports</li>
<li>Ankle Comfort Dial</li>
<li>Extended Handle</li>
</ul>
</a>
</div>
</div>
</div>
</div>
<a class="product-detail" href="https://teetertv.com/deluxe-ez-reach-handle/" target="_blank"><i class="fa fa-list"></i> Details</a><section class="one-page-shopping-section one-page-shopping-add-to-cart"> <p class="product woocommerce add_to_cart_inline " style="border:4px solid #ccc; padding: 12px;">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>169.00</span>
<a rel="nofollow" href="/accessories/?add-to-cart=26828" data-quantity="1" data-product_id="26828" data-product_sku="NX1620" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>
</p></section>
</div>
<div class="box accessory">
<h2 class="accessory-title-top" data-fontsize="25" data-lineheight="30"><a href="https://teetertv.com/traction-handles/" target="_blank"> EZ Stretch<span style="font-size:0.5em;vertical-align:super; line-height:0;"><sup>TM</sup></span> Traction Handles</a></h2>
<div class="container-overlay">
<div class="content">
<div class="content-overlay">
<a href="https://teetertv.com/traction-handles/" target="_blank"></a>
</div>
<a href="https://teetertv.com/traction-handles/" target="_blank"><img class="content-image" src="https://teetertv.com/wp-content/uploads/2017/07/teeter-ez-stretch-traction-handles.png" alt="Teeter Hang Ups Ez-Stretch Traction Handles for Inversion Tables"></a>
<div class="content-details fadeIn-bottom">
<div class="content-text">
<a href="https://teetertv.com/traction-handles/" target="_blank">
<ul style="color: #fff; text-align: left; font-size: 15px;">
<li>Added decompression</li>
<li>Rubber-Coated Grips</li>
<li>For intermittent traction and oscillation</li>
</ul>
</a>
</div>
</div>
</div>
</div>
<a class="product-detail" href="https://teetertv.com/traction-handles/" target="_blank"><i class="fa fa-list"></i> Details</a><section class="one-page-shopping-section one-page-shopping-add-to-cart"> <p class="product woocommerce add_to_cart_inline " style="border:4px solid #ccc; padding: 12px;">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>39.00</span>
<a rel="nofollow" href="/accessories/?add-to-cart=12861" data-quantity="1" data-product_id="12861" data-product_sku="TR1001" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>
</p></section>
</div>
<div class="box accessory">
<h2 class="accessory-title-top" data-fontsize="25" data-lineheight="30"><a href="https://teetertv.com/ez-up-gravity-boots/" target="_blank">EZ-Up Gravity Boots with Adapter Kit</a></h2>
<div class="container-overlay">
<div class="content">
<div class="content-overlay">
<a href="https://teetertv.com/ez-up-gravity-boots/" target="_blank"></a>
</div>
<a href="https://teetertv.com/ez-up-gravity-boots/" target="_blank"><img class="content-image" src="https://teetertv.com/wp-content/uploads/2017/04/teeter-gravity-boots-with-adapter-kit.jpg" alt="Teeter Hang ups Gravity Boots with Adapter Kit for Inversion Tables"></a>
<div class="content-details fadeIn-bottom">
<div class="content-text">
<a href="https://teetertv.com/ez-up-gravity-boots/" target="_blank">
<ul style="color: #fff; text-align: left; font-size: 15px;">
<li>Easily Converts for use with EZ-Up Gravity Boots</li>
<li>Dual, Self-Locking Buckles</li>
<li>Super-Soft 5/8” Foam Liners</li>
<li>One-size-fits-most design</li>
</ul>
</a>
</div>
</div>
</div>
</div>
<a class="product-detail" href="https://teetertv.com/ez-up-gravity-boots/" target="_blank"><i class="fa fa-list"></i> Details</a><section class="one-page-shopping-section one-page-shopping-add-to-cart"> <p class="product woocommerce add_to_cart_inline " style="border:4px solid #ccc; padding: 12px;">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>99.00</span>
<a rel="nofollow" href="/accessories/?add-to-cart=26831" data-quantity="1" data-product_id="26831" data-product_sku="B11032" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>
</p></section>
</div>
<div class="box stretch" style="display: block;">
<h2 class="accessory-title-top" data-fontsize="25" data-lineheight="30"><a href="http://teetertv.com/foam-roller/" target="_blank">Foam Roller</a></h2>
<div class="container-overlay">
<div class="content">
<div class="content-overlay">
<a href="http://teetertv.com/foam-roller/" target="_blank"></a>
</div>
<a href="http://teetertv.com/foam-roller/" target="_blank"><img class="content-image" src="https://teetertv.com/wp-content/uploads/2017/04/teeter-foam-roller.jpg" alt="Teeter Hang Ups Foam Roller for muscle recovery"></a>
<div class="content-details fadeIn-bottom">
<div class="content-text">
<a href="http://teetertv.com/foam-roller/" target="_blank">
<ul style="color: #fff; text-align: left; font-size: 15px;">
<li>Versatile design</li>
<li>Extra firm black high-density</li>
<li>Durable moisture-resistant material</li>
<li>Compact, portable mobility tool</li>
</ul>
</a>
</div>
</div>
</div>
</div>
<a class="product-detail" href="http://teetertv.com/foam-roller/" target="_blank"><i class="fa fa-list"></i> Details</a><section class="one-page-shopping-section one-page-shopping-add-to-cart"> <p class="product woocommerce add_to_cart_inline " style="border:4px solid #ccc; padding: 12px;">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29.00</span>
<a rel="nofollow" href="/accessories/?add-to-cart=12864" data-quantity="1" data-product_id="12864" data-product_sku="FR2001" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>
</p></section>
</div>
<div class="box accessory" style="
/* float: right; */
">
<h2 class="accessory-title-top" data-fontsize="25" data-lineheight="30"><a href="https://teetertv.com/inversion-program-mat/" target="_blank">Inversion Program Mat</a></h2>
<div class="container-overlay">
<div class="content">
<div class="content-overlay">
<a href="https://teetertv.com/inversion-program-mat/" target="_blank"></a>
</div>
<a href="https://teetertv.com/inversion-program-mat/" target="_blank"><img class="content-image" src="https://teetertv.com/wp-content/uploads/2017/07/teeter-inversion-program-mat.png" alt="Teeter Hang Ups Inversion Table Program Mat"></a>
<div class="content-details fadeIn-bottom">
<div class="content-text">
<a href="https://teetertv.com/inversion-program-mat/" target="_blank">
<ul style="color: #fff; text-align: left; font-size: 15px;">
<li>24 illustrated movements</li>
<li>Offers non-skid protection</li>
<li>Washable, latex-free material</li>
</ul>
</a>
</div>
</div>
</div>
</div>
<a class="product-detail" href="https://teetertv.com/inversion-program-mat/" target="_blank"><i class="fa fa-list"></i> Details</a><section class="one-page-shopping-section one-page-shopping-add-to-cart"> <p class="product woocommerce add_to_cart_inline " style="border:4px solid #ccc; padding: 12px;">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>49.00</span>
<a rel="nofollow" href="/accessories/?add-to-cart=12670" data-quantity="1" data-product_id="12670" data-product_sku="IM1001" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>
</p></section>
</div>
<div class="box accessory">
<h2 class="accessory-title-top" data-fontsize="25" data-lineheight="30"><a href="https://teetertv.com/neck-restore" target="_blank">Neck Restore</a></h2>
<div class="container-overlay">
<div class="content">
<div class="content-overlay">
<a href="https://teetertv.com/neck-restore" target="_blank"></a>
</div>
<a href="https://teetertv.com/neck-restore" target="_blank"><img class="content-image" src="https://teetertv.com/wp-content/uploads/2017/04/teeter-neck-restore.jpg" alt="Teeter Hang Ups Neck Restore for Neck Pain Relief"></a>
<div class="content-details fadeIn-bottom">
<div class="content-text">
<a href="https://teetertv.com/neck-restore" target="_blank">
<ul style="color: #fff; text-align: left; font-size: 15px;">
<li>Reduce muscle tension, soreness and pain</li>
<li>Ergonomic support</li>
<li>Rotates for variable pressure</li>
<li>Use as a stand-alone massage or traction tool</li>
<li>Deliver optional cooling relief</li>
</ul>
</a>
</div>
</div>
</div>
</div>
<a class="product-detail" href="https://teetertv.com/neck-restore" target="_blank"><i class="fa fa-list"></i> Details</a><section class="one-page-shopping-section one-page-shopping-add-to-cart"> <p class="product woocommerce add_to_cart_inline " style="border:4px solid #ccc; padding: 12px;">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29.99</span>
<a rel="nofollow" href="/accessories/?add-to-cart=23177" data-quantity="1" data-product_id="23177" data-product_sku="" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>
</p></section>
</div>
<div class="box stretch" style="display: block;">
<h2 class="accessory-title-top" data-fontsize="25" data-lineheight="30"><a href="https://teetertv.com/p2-back-stretcher/" target="_blank"> P2 Back Stretcher</a></h2>
<div class="container-overlay">
<div class="content">
<div class="content-overlay">
<a href="https://teetertv.com/p2-back-stretcher/" target="_blank"></a>
</div>
<a href="https://teetertv.com/p2-back-stretcher/" target="_blank"> <img class="content-image" src="https://teetertv.com/wp-content/uploads/2017/07/p2-back-stretcher.png" alt="Teeter Hang Ups P2 Back Stretcher for Back Pain Relief"></a>
<div class="content-details fadeIn-bottom">
<div class="content-text">
<a href="https://teetertv.com/p2-back-stretcher/" target="_blank">
<ul style="color: #fff; text-align: left; font-size: 15px;">
<li>Easy to Use Decompression Solution</li>
<li>Comfortable Roller Supports</li>
<li>Designed to fit most body types</li>
<li>Foam-Cover Hand Grips</li>
</ul>
</a>
</div>
</div>
</div>
</div>
<a class="product-detail" href="https://teetertv.com/p2-back-stretcher/" target="_blank"><i class="fa fa-list"></i> Details</a><section class="one-page-shopping-section one-page-shopping-add-to-cart"> <p class="product woocommerce add_to_cart_inline " style="border:4px solid #ccc; padding: 12px;">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>44.95</span>
<a rel="nofollow" href="/accessories/?add-to-cart=29517" data-quantity="1" data-product_id="29517" data-product_sku="P21002" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>
</p></section>
</div>
<div class="box accessory">
<h2 class="accessory-title-top" data-fontsize="25" data-lineheight="30"><a href="https://teetertv.com/muscle-rub/" target="_blank">reNEW <span style="font-size:0.5em;vertical-align:super; line-height:0;"><sup>TM</sup></span> Pain Relief Cream (2oz.)</a></h2>
<div class="container-overlay">
<div class="content">
<div class="content-overlay">
<a href="https://teetertv.com/muscle-rub/" target="_blank"></a>
</div>
<a href="https://teetertv.com/muscle-rub/" target="_blank"><img class="content-image" src="https://teetertv.com/wp-content/uploads/2017/06/150ml-tubes-with-artwork-final_1216-1.png" alt="Teeter Hang Ups Muscle Cream for sore muscle relief"></a>
<div class="content-details fadeIn-bottom">
<div class="content-text">
<a href="https://teetertv.com/muscle-rub/" target="_blank">
<ul style="color: #fff; text-align: left; font-size: 15px;">
<li>Fast Relief, Non-Greasy!</li>
<li>Natural Ingredients:<span style="text-indent: 20px;display: block;margin: 0px;">o Emu Oil</span>
<span style="text-indent: 20px;display: block;margin: 0px;">o Boswellia Serrata</span>
<span style="text-indent: 20px;display: block;margin: 0px;">o Glucosomine</span>
<span style="text-indent: 20px;display: block;margin: 0px;">o Arnica & MSM</span>
</li>
<li>Parabens/Sulfate FREE!</li>
</ul>
</a>
</div>
</div>
</div>
</div>
<a class="product-detail" href="https://teetertv.com/muscle-rub/" target="_blank"><i class="fa fa-list"></i> Details</a><section class="one-page-shopping-section one-page-shopping-add-to-cart"> <p class="product woocommerce add_to_cart_inline " style="border:4px solid #ccc; padding: 12px;">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>14.00</span>
<a rel="nofollow" href="/accessories/?add-to-cart=17410" data-quantity="1" data-product_id="17410" data-product_sku="MR2003N" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>
</p></section>
</div>
<div class="box office" style="display: block;">
<h2 class="accessory-title-top" data-fontsize="25" data-lineheight="30"><a href="https://teetertv.com/sit-stand-desk/" target="_blank">Sit-Stand<span style="font-size:0.5em;vertical-align:super; line-height:0;"><sup>TM</sup></span> Desk</a></h2>
<div class="container-overlay">
<div class="content">
<div class="content-overlay">
<a href="https://teetertv.com/sit-stand-desk/" target="_blank"></a>
</div>
<a href="https://teetertv.com/sit-stand-desk/" target="_blank"><img class="content-image" src="https://teetertv.com/wp-content/uploads/2017/04/teeter-sit-stand-desk.jpg" alt="Teeter Hang Ups Standing Desk Sit Stand Desk"></a>
<div class="content-details fadeIn-bottom">
<div class="content-text">
<a href="https://teetertv.com/sit-stand-desk/" target="_blank">
<ul style="color: #fff; text-align: left; font-size: 15px;">
<li>Sit-to-Stand Transition</li>
<li>Customizable Angles</li>
<li>Ambidextrous</li>
<li>Easy Adjustment</li>
</ul>
</a>
</div>
</div>
</div>
</div>
<a class="product-detail" href="https://teetertv.com/sit-stand-desk/" target="_blank"><i class="fa fa-list"></i> Details</a><section class="one-page-shopping-section one-page-shopping-add-to-cart"> <p class="product woocommerce add_to_cart_inline " style="border:4px solid #ccc; padding: 12px;">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>199.00</span>
<a rel="nofollow" href="/accessories/?add-to-cart=24595" data-quantity="1" data-product_id="24595" data-product_sku="ST2001" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>
</p></section>
</div>
<div class="box stretch" style="display: block;">
<h2 class="accessory-title-top" data-fontsize="25" data-lineheight="30"><a href="https://teetertv.com/t3-massager/" target="_blank"> T3 Massager</a></h2>
<div class="container-overlay">
<div class="content">
<div class="content-overlay">
<a href="https://teetertv.com/t3-massager/" target="_blank"></a>
</div>
<a href="https://teetertv.com/t3-massager/" target="_blank"> <img class="content-image" src="https://teetertv.com/wp-content/uploads/2017/04/teeter-t3-massager.jpg" alt="Teeter Hang Ups T3 Massager for Back pain relief"></a>
<div class="content-details fadeIn-bottom">
<div class="content-text">
<a href="https://teetertv.com/t3-massager/" target="_blank">
<ul style="color: #fff; text-align: left; font-size: 15px;">
<li>Achieve a pressure point massage</li>
<li>Roller Wheels options</li>
<li>Stick Roller</li>
<li>Strap Attachment</li>
</ul>
</a>
</div>
</div>
</div>
</div>
<a class="product-detail" href="https://teetertv.com/t3-massager/" target="_blank"><i class="fa fa-list"></i> Details</a><section class="one-page-shopping-section one-page-shopping-add-to-cart"> <p class="product woocommerce add_to_cart_inline " style="border:4px solid #ccc; padding: 12px;">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>39.99</span>
<a rel="nofollow" href="/accessories/?add-to-cart=17348" data-quantity="1" data-product_id="17348" data-product_sku="TT1001" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>
</p></section>
</div>
<div class="box accessory">
<h2 class="accessory-title-top" data-fontsize="25" data-lineheight="30"><a href="https://teetertv.com/bonus-pack/" target="_blank">Teeter Bonus Pack</a></h2>
<div class="container-overlay">
<div class="content">
<div class="content-overlay">
<a href="https://teetertv.com/bonus-pack/" target="_blank"></a>
</div>
<a href="https://teetertv.com/bonus-pack/" target="_blank"><img class="content-image" src="https://teetertv.com/wp-content/uploads/2017/04/teeter-bonus-pack.jpg" alt="Teeter Hang Ups Bonus Pack-Comes FREE with your puchase on Teetertv.com"></a>
<div class="content-details fadeIn-bottom">
<div class="content-text">
<a href="https://teetertv.com/bonus-pack/" target="_blank">
<ul style="color: #fff; text-align: left; font-size: 15px;">
<li>Better Back Adjustable Acupressure Nodes</li>
<li>Better Back Lumbar Bridge</li>
<li>Healthy Back & Core DVD</li>
</ul>
</a>
</div>
</div>
</div>
</div>
<a class="product-detail" href="https://teetertv.com/bonus-pack/" target="_blank"><i class="fa fa-list"></i> Details</a><section class="one-page-shopping-section one-page-shopping-add-to-cart"> <p class="product woocommerce add_to_cart_inline " style="border:4px solid #ccc; padding: 12px;">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>149.95</span>
<a rel="nofollow" href="/accessories/?add-to-cart=12865" data-quantity="1" data-product_id="12865" data-product_sku="GP1001" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>
</p></section>
</div>
<div class="box accessory">
<h2 class="accessory-title-top" data-fontsize="25" data-lineheight="30"><a href="https://teetertv.com/vibration-cushion/" target="_blank">Vibration Cushion</a></h2>
<div class="container-overlay">
<div class="content">
<div class="content-overlay">
<a href="https://teetertv.com/vibration-cushion/" target="_blank"></a>