interface – Why aren’t my grid elements aligning correctly in a docked cells toolbar?

The following is just the initial start of my very first docked cells toolbar I am still working on. It can easily be loaded to view it live. Code is also provided to conveniently remove it afterwards.

I usually have no difficulties aligning grid elements even complex ones but this one really baffles me. What am I missing here? Do grid elements behave differently when docked? The desired alignment is in cdgrid as Alignment -> {{Left, Right}, {Center, Center}}. Please help.

Toolbar code is here. As added note Save works but the other buttons do not or are just placeholders…

navy = RGBColor[0, 0, .5, 1];
saveinterval = 30;

dcbutstyle = Sequence[navy, 10];
dcbutOps[width_ : 120, bgolor_ : LightBlue] := 
  Sequence[Appearance -> "Frameless", Background -> LightBlue, 
   Alignment -> Center, ImageSize -> {width, 14}, 
   ImageMargins -> {{2, 0}, {0, 1}}];

autoSaveTimed[minutes_ : 10] := 
  Row[{"last autoSave", 
    Dynamic[Refresh[NotebookSave[]; DateString[], 
      UpdateInterval -> minutes 60]]}, " [Rule] "];

dcgrid = Grid[{{
       Style["NB", FontFamily -> "Helvetica", 12, Bold, LightBlue], 
       Style["TASKMATE", FontFamily -> "Helvetica", 12, Red], 
       Style["  [RuleDelayed]", FontFamily -> "Helvetica", 12, Bold, 
       Button[Style["Save", dcbutstyle], FrontEndTokenExecute["Save"],
       Button[Style["blah", dcbutstyle], Null, dcbutOps[40]],
       Button[Style["AutoSave: 30:00", dcbutstyle], 
        autoSaveTimed[saveinterval], dcbutOps[80]]
     }}, Alignment -> {{Left, Right}, {Center, Center}}];

dcToolbar[] := 
   DockedCells -> 
    Cell[BoxData[ToBoxes[dcgrid]], "DockedCell", Background -> navy]];


To clear toolbars use the following. Afterwards use Clear, ClearAll, or Remove at your discretion.

SetOptions[EvaluationNotebook[], DockedCells -> Inherited, 
  TaggingRules -> Inherited, CellContext -> Inherited];