CSS Centered Width Styling in Vaadin Theme - Java

I have a weird behavior that I can not explain to myself. Could anyone explain this to me?

I would like to have a Horizontal Layout of width:80% and it contains buttons and they should be also centered. But It comes out weird. I decided to include the HTML code with .css - Let me know if you need the Java/Vaadin code as well. But I think that .CSS should dictate everything here.

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route("")
public class TestView extends VerticalLayout {

	public TestView() {
		Button test = new Button("Test");
		test.setWidth("30%");
		Button test1 = new Button("Test");
		test1.setWidth("30%");
		Button test2 = new Button("Test");
		test2.setWidth("30%");
		
		HorizontalLayout horizontalLayout = new HorizontalLayout(test, test1, test2);
		horizontalLayout.setAlignItems(Alignment.CENTER);
		horizontalLayout.setWidth("80%");
		add(horizontalLayout);
		
		// Center the view content on the page
		setSizeFull();
		// setJustifyContentMode(JustifyContentMode.CENTER);
		setAlignItems(Alignment.CENTER);
	}
}

hopefully the thing works, when you try it at your end?

(this one has even some extra orange space):

And probably you will also need the pom.xml:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
   <modelVersion>4.0.0</modelVersion>
   <!-- Project from https://start.vaadin.com/ -->
   <groupId>com.example.application</groupId>
   <artifactId>flowcrmtutorial</artifactId>
   <name>flowcrmtutorial</name>
   <version>1.0-SNAPSHOT</version>
   <packaging>jar</packaging>

   <properties>
       <java.version>17</java.version>
       <vaadin.version>24.1.4</vaadin.version>
       <selenium.version>4.10.0</selenium.version>
   </properties>

   <parent>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-parent</artifactId>
       <version>3.1.0</version>
   </parent>

   <repositories>
       <repository>
           <id>Vaadin Directory</id>
           <url>https://maven.vaadin.com/vaadin-addons</url>
           <snapshots>
               <enabled>false</enabled>
           </snapshots>
       </repository>
   </repositories>

   <dependencyManagement>
       <dependencies>
           <dependency>
               <groupId>com.vaadin</groupId>
               <artifactId>vaadin-bom</artifactId>
               <version>${vaadin.version}</version>
               <type>pom</type>
               <scope>import</scope>
           </dependency>
       </dependencies>
   </dependencyManagement>

   <dependencies>
       <dependency>
           <groupId>com.vaadin</groupId>
           <!-- Replace artifactId with vaadin-core to use only free components -->
           <artifactId>vaadin</artifactId>
       </dependency>
       <dependency>
           <groupId>com.vaadin</groupId>
           <artifactId>vaadin-spring-boot-starter</artifactId>
       </dependency>
       <dependency>
           <groupId>org.parttio</groupId>
           <artifactId>line-awesome</artifactId>
           <version>1.1.0</version>
       </dependency>

       <dependency>
           <groupId>com.h2database</groupId>
           <artifactId>h2</artifactId>
           <scope>runtime</scope>
       </dependency>

       <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-starter-data-jpa</artifactId>
       </dependency>

       <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-starter-validation</artifactId>
       </dependency>
       <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-devtools</artifactId>
           <optional>true</optional>
       </dependency>
       <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-starter-test</artifactId>
           <scope>test</scope>
       </dependency>
       <dependency>
           <groupId>com.vaadin</groupId>
           <artifactId>vaadin-testbench-junit5</artifactId>
           <scope>test</scope>
       </dependency>
   </dependencies>

   <build>
       <defaultGoal>spring-boot:run</defaultGoal>
       <plugins>
           <plugin>
               <groupId>org.springframework.boot</groupId>
               <artifactId>spring-boot-maven-plugin</artifactId>
               <configuration>
                   <jvmArguments>-Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=5719</jvmArguments>
                   <wait>500</wait>
                   <maxAttempts>240</maxAttempts>
               </configuration>
           </plugin>

           <plugin>
               <groupId>com.vaadin</groupId>
               <artifactId>vaadin-maven-plugin</artifactId>
               <version>${vaadin.version}</version>
               <executions>
                   <execution>
                       <goals>
                           <goal>prepare-frontend</goal>
                       </goals>
                   </execution>
               </executions>
           </plugin>
       </plugins>
   </build>
</project>

And what I want to achieve is this:

With the .HTML code:

<html>
<head>
</head>
<body>
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
 <div style="width: 80%;">
     <div style="display: flex; justify-content: center;">
         <button style="width: 30%;">Button 1</button>
         <button style="width: 30%;">Button 2</button>
         <button style="width: 30%;">Button 3</button>
     </div>
 </div>
</div>
</body>
</html>

The reason for the empty (or purple, as shown by the browser's inspector) area in the layout is that its contents are left-aligned (the default) rather than horizontally centered.

As shown in the documentation
(https://vaadin.com/docs/latest/components/horizontal-layout#horizontal-alignment), this is configured with setJustifyContentMode(JustifyContentMode.CENTER).

(The API for setting horizontal and vertical alignment in HorizontalLayout and VerticalLayout are "orthogonal" to each other, because it follows the FlexBox model that works the same way. What I mean by this is that in HorizontalLayout, vertical alignment is set with setAlignItems and the horizontal alignment is called "justification" and set with setJustifyContentMode, whereas in VerticalLayout it's the other way around. The rationale behind this is that "justification" denotes the layout's "main" or "directional" axis, while "alignment" denotes the "cross axis" that goes "across" the directional axis.)