While working on designing a Wordpress theme using Bootstrap, I encountered an unusual issue. My CSS ribbons are mysteriously offset by 20px to the left and the folds of the ribbon CSS are not displaying as expected within a centered container. It's puzzling because my other content does not have this offset...
If anyone has any insights or suggestions on what might be causing this peculiar behavior, I would greatly appreciate it!
Below is a snippet of the code:
CSS
/* Ribbon
-------------------------------------------------*/
.rectangle {
background: #7f9db9;
height: 50px;
width: 970px;
position: relative;
left:-15px;
top: 30px;
float: left;
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
z-index: 100; /* the stack order: foreground */
}
.rectangle h2 {
font-size: 30px;
color: #fff;
padding-top: 6px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
text-align: center;
}
HTML
<div class="row">
<div class="rectangle"><h2>3D CSS Ribbon</h2></div>
</div>
You can also check out my work-in-progress website here:
I'm looking forward to any assistance or guidance you can provide. Thank you!