Move parent object so that selected child object aligns with sibling

Hey all,

I have a parent object with a Horizontal Layout Group component that has some number of children objects instantiated at runtime.

The children objects are lined up and I want to move the parent object so that the target child object lines up with a sibling (S) of the parent when clicking the left or right button. Image below of UI:

The desire is that clicking the R-button would align C3 with S or clicking the L-button would align C1 with S. The parent object moves behind the mask (M).

The strategy I've taken so far is trying to line the parent up with an offset of the target child's RectTransform rect width and spacing of the Horizontal Layout Group.

Clicking the right button:

 parentObj.transform.position = new Vector3(parentObj.transform.position.x - OffsetValue, parentObj.transform.position.y);

Where OffsetValue is:

 OffsetValue =  childObj.rectTransform.rect.width + HorizontalLayoutGroup.spacing;

Unfortunately this causes the parent object to transform well past the child object that I am targeting. Does anyone know why this is happening and what I can do to resolve it? I'm not even really sure if my approach to this is right so any tips would be greatly appreciated.