Why is the Spicy Banner mis-aligned?

The demo in the Introduction to SwiftUI showed a nicely aligned "🔥Spicy" Label consisting of a String and the flame.fill SF symbol. However, with the code below (appearing immediately before the closing bracket for the VStack in the body property within the SandwichDetail struct), the label appears misaligned.
The single flame.fill symbol appears as normal, but as though it occupies the space that two flame.fill symbols would occupy if stacked vertically. Only one symbol is visible but as though on the preceding line relative to the Spicy string following immediately after.

Code Block 
            if sandwich.isSpicy && !zoomed {
                HStack {
                    Spacer()
                    Label("Spicy", systemImage: "flame.fill")
                    Spacer()
                }
                .padding(.all)
                .font(Font.headline.smallCaps())
                .background(Color.red)
                .foregroundColor(.yellow)
                .transition(.move(edge: .bottom))
            }