Why aren't my grid elements aligning correctly in a docked cells toolbar?

Question

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[{{
     Row[{
       Style["NB", FontFamily -> "Helvetica", 12, Bold, LightBlue], 
       Style["TASKMATE", FontFamily -> "Helvetica", 12, Red], 
       Style["  \[RuleDelayed]", FontFamily -> "Helvetica", 12, Bold, 
        White]
       }],
     Row[{
       Button[Style["Save", dcbutstyle], FrontEndTokenExecute["Save"],
         dcbutOps[40]],
       Button[Style["blah", dcbutstyle], Null, dcbutOps[40]],
       Button[Style["AutoSave: 30:00", dcbutstyle], 
        autoSaveTimed[saveinterval], dcbutOps[80]]
       }]
     }}, Alignment -> {{Left, Right}, {Center, Center}}];

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

dcToolbar[];

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

SetOptions[EvaluationNotebook[], DockedCells -> Inherited, 
  TaggingRules -> Inherited, CellContext -> Inherited];
ClearAll["Global`*"];

Answer 1

The alignments Left and Right don't mean much when the item size is the size of the item. Perhaps the OP wants a grid the size of the window. In that case, use Scaled[] item sizes with the scaling factors adding up to 1 or a little less.

dcgrid = 
 Grid[{{Row[{Style["NB", FontFamily -> "Helvetica", 12, Bold, 
       LightBlue], 
      Style["TASKMATE", FontFamily -> "Helvetica", 12, Red], 
      Style["  \[RuleDelayed]", FontFamily -> "Helvetica", 12, Bold, 
       White]}], 
    Row[{Button[Style["Save", dcbutstyle], 
       FrontEndTokenExecute["Save"], dcbutOps[40]], 
      Button[Style["blah", dcbutstyle], Null, dcbutOps[40]], 
      Button[Style["AutoSave: 30:00", dcbutstyle], 
       autoSaveTimed[saveinterval], dcbutOps[80]]}]}}, 
  Alignment -> {{Left, Right}, {Center, Center}},
  (* ADD THIS: *)
  ItemSize -> {"Columns" -> {{Scaled[0.5]}}}
 ] 

Answer 2

You are actually defining a grid with only one row. Inside Gris you have the form: {{...}}.If you want two rows you must use something like: {{..},{..}}. In your case:

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

This results in: