I'm trying to develop a widget in gtk4 as follows:

let container = Box::new(Orientation::Horizontal, 0);
let workspace_num = Label::new(Some("11"));
let workspace_num_box = gtk4::Box::new(gtk4::Orientation::Horizontal, 0);

let left_arrow = Label::new(Some("")); // Flipped using CSS
let left_arrow_box = gtk4::Box::new(gtk4::Orientation::Horizontal, 0);

let right_arrow = Label::new(Some(""));
let right_arrow_box = gtk4::Box::new(gtk4::Orientation::Horizontal, 0);

// Apply the CSS files
utils::apply_css_files(&[utils::scale_sizes(include_str!("style.css")), include_str!("../../../colors.css")]);

// Set CSS classes
container.set_css_classes(&["workspace", "workspace-box", "background-color", "border-color"]);
workspace_num.set_css_classes(&["workspace", "workspace-num", "background-color-primary", "primary-color-bg"]);
workspace_num_box.set_css_classes(&["workspace", "workspace-num-box"]);
left_arrow.set_css_classes(&["workspace", "workspace-arrow", "workspace-left-arrow", "primary-color"]);
left_arrow_box.set_css_classes(&["workspace", "workspace-arrow", "workspace-left-arrow-box"]);
right_arrow.set_css_classes(&["workspace", "workspace-arrow", "workspace-right-arrow", "primary-color"]);
right_arrow_box.set_css_classes(&["workspace", "workspace-arrow", "workspace-right-arrow-box"]);



left_arrow.set_valign(gtk4::Align::Center);
left_arrow.set_halign(gtk4::Align::Center);
//left_arrow.set_xalign(0.5);
workspace_num.set_valign(gtk4::Align::Center);
workspace_num.set_halign(gtk4::Align::Center);
right_arrow.set_valign(gtk4::Align::Center);
right_arrow.set_halign(gtk4::Align::Center);


workspace_num_box.append(&workspace_num);
left_arrow_box.append(&left_arrow);
right_arrow_box.append(&right_arrow);

container.append(&left_arrow_box);
container.append(&workspace_num_box);
container.append(&right_arrow_box);

and my style.css:

.workspace-box {
    border-radius: 80px;
    border: 2px solid;
    min-width: 100px;
}

.workspace-arrow {
    font-size: 16px;
}
.workspace-num-box {
    background: green;
    min-width: 40px;
}
.workspace-num {
    border-radius: 100%;
    min-height: 24px; 
    min-width: 24px; 
    font-size: 12px ;
}
.workspace-left-arrow-box {
    /* transform: scale(-1, 1); */
    background: red;
    min-width:30px;
}
.workspace-right-arrow-box {
    min-width: 30px;
    background: red;
}

widget preview

I want the workspace_num, left_arrow, right_arrow to be aligned centered to their respective parent boxes.

Anyone know how to? And why is the

gtk4::Align::Center)

not working?