How to make three buttons at bottom of screen more towards the center

How can I make the three buttons at the bottom be "tighter" and more close to the center? I tried to play around with padding, but it only went "inward" a tiny bit

    var body: some View {
        VStack {
            Text("Memorize!")
                .font(.title)
            ScrollView {
                LazyVGrid(columns: [GridItem(.adaptive(minimum: 75))]) {
                    ForEach(emojis, id: \.self, content: { emoji in
                        CardView(content: emoji).aspectRatio(2/3, contentMode: .fit)
                    })
                }
                .padding()
            }
            .foregroundColor(.red)
            Spacer()
            HStack() {
                VStack {
                    vehicleButton
                    Text("Vehicles")
                        .font(.footnote)
                        .foregroundColor(Color.blue)
                }
                Spacer()
                VStack {
                    animalButton
                    Text("Animals")
                        .font(.footnote)
                        .foregroundColor(Color.blue)
                }
                Spacer()
                VStack {
                    faceButton
                    Text("Faces")
                        .font(.footnote)
                        .foregroundColor(Color.blue)
                }
            }
            .font(.largeTitle)
            .padding(.horizontal)
        }
    }

Screen

>Solution :

Your Spacer() views inside your HStack will push the buttons as far out from each other as possible.

If you want the items closer to the centre, you should remove them and instead use the HStack constructor’s spacing: argument to govern the space between elements:

HStack(spacing: 20) { // adjust accordingly
  VStack {
    vehicleButton
    Text("Vehicles")
      .font(.footnote)
      .foregroundColor(Color.blue)
  }
  VStack {
    animalButton
    Text("Animals")
      .font(.footnote)
      .foregroundColor(Color.blue)
  }
  VStack {
    faceButton
    Text("Faces")
      .font(.footnote)
      .foregroundColor(Color.blue)
  }
}

The HStack overall will be centered, because that’s the default alignment of its parent VStack. However, because the individual child items theoretically have different widths, individually they might not look quite centered (say, if one ends up with a caption that’s wider than the icon). You could apply a .frame(width:) modifier to each VStack if you needed to.