I resolved this and am posting my (what may be obvious to some) fix, so that anyone else with the same issue can have peace of mind! Basically, put the style positioning in with "#headerR" etc declarations. Not sure just yet if width is necessary, so I'll be testing this.
#headerR {
flow: static(headerR, start);
font-size: 9pt;
font-family:serif, Times New Roman;
width:33%;
float:right;
}


I'm using divs (with the exception of a page counter) to pass dynamic content into the header and footer. Each has 3 options (left, center and right). The content displays on the pdf but I'm having real trouble getting the header and footer alignment correct. Top-left and bottom-left display correctly aligned with each other, but top-center/bottom-center and top-right/bottom-right don't line up with each other and it doesn't look good.

How can I get the header and footer alignment as I need it (top-left/bottom-left; top-center/bottom-center; top-right/bottom-right)?

Here is a sample of my code: I've tried a number of different things and would so appreciate any help. Thank you in advance!

#headerL {
flow: static(headerL, start);
font-size:9pt;
}
#headerM {
flow: static(headerM, start);
font-size:9pt;
}
#headerR {
flow: static(headerR, start);
font-size:9pt;
}
#footerL{
flow: static(footerL, start);
font-size:9pt;
}

#footerR
{
flow: static(footerR, start);
font-size:9pt;
}

@page {
size: US-Letter;
margin: .5in .5in .5in .5in;
@top-left
{
margin-left: .5in;
margin-bottom: 1em;
vertical-align: bottom;
content: flow(headerL);
text-align: left;
position:relative;
}
@top-center
{

margin-bottom: 1em;
vertical-align: bottom;
content: flow(headerM);
text-align:justify;
position:relative;
}
@top-right
{
margin-bottom: 1em;
vertical-align: bottom;
content: flow(headerR);
white-space: nowrap;
text-align:right;
position:relative;
float:right;

}

@bottom-left{
margin-left: .5in;
content: flow(footerL);
vertical-align: top;
white-space: nowrap;
text-align: left;
position:relative;

}
@bottom-center {
content: counter(page);
vertical-align: top;
text-align:justify;
position:relative;

}
@bottom-right
{
content: flow(footerR);
vertical-align: top;
text-align:right;
position:relative;
float: right;

}
}