NavigationView creates too much of space at the top

Hello! I am trying to make a simple app. The page I am currently working on has a few shapes in an HStack and VStack. I've used ZStack to wrap the entire code to have a different background. When I go to the AppName.swift and place the ContentView() in NavigationView{}, the outcome has too much space on the top, shifted maybe a couple of lines. In the preview, the outcome looks perfectly fine. I really do not want that much space and I do not understand why that is happening. Is there anyway I can adjust the size?

Code Block import SwiftUI
//main page of the UI
struct ContentView: View {
    var body: some View {
        
            NavigationView{
                ZStack{
                GeometryReader{ geometry in
                VStack{
                    Spacer()
                    ZStack{
                        RoundedRectangle(cornerRadius: 10, style: .continuous)
                            .fill(Color.init(red: 0.93, green: 1.0, blue: 0.953))
                            .frame(width: 350, height: 50)
                    }
                    
                    Spacer()
                    
                    //
                    HStack(spacing:50){
                        RoundedRectangle(cornerRadius: 25, style: .continuous)
                            .fill(Color.init(red: 0.93, green: 1.0, blue: 0.953))
                            .frame(width: 150, height: 200)
                        
                        
                        RoundedRectangle(cornerRadius: 25, style: .continuous)
                            .fill(Color.init(red: 0.93, green: 1.0, blue: 0.953))
                            .frame(width: 150, height: 200)
                    }
                    
                    Spacer()
                    HStack(spacing:50){
                        RoundedRectangle(cornerRadius: 25, style: .continuous)
                            .fill(Color.init(red: 0.93, green: 1.0, blue: 0.953))
                            .frame(width: 150, height: 200)
                        
                        
                        RoundedRectangle(cornerRadius: 25, style: .continuous)
                            .fill(Color.init(red: 0.93, green: 1.0, blue: 0.953))
                            .frame(width: 150, height: 200)
                    }
                    
                    Spacer()
                    
                    HStack{
                        TabBarIcon(width: geometry.size.width/5, height: geometry.size.height/28, systemIconName: "cart", tabName: "List")
                        
                        TabBarIcon(width: geometry.size.width/5, height: geometry.size.height/28, systemIconName: "ticket", tabName: "Rewards")
                        
                        ZStack{
                            Circle()
                                .fill(Color.init(red: 0.93, green: 1.0, blue: 0.953))
                                .foregroundColor(.white)
                                .frame(width: geometry.size.width/7, height: geometry.size.width/7)
                                .shadow(radius: 4)
                            Image(systemName: "plus.circle.fill")
                                .resizable()
                                .aspectRatio(contentMode: /*@START_MENU_TOKEN@*/.fill/*@END_MENU_TOKEN@*/)
                            .frame(width: geometry.size.width/8, height: geometry.size.width/8)
                                .foregroundColor(Color("TabBarBackground"))
                            
                        }
                        .offset(y: -geometry.size.height/8/2)
                        
                        
                        TabBarIcon(width: geometry.size.width/5, height: geometry.size.height/28, systemIconName: "leaf", tabName: "SmartRecipe")
                        
                        
                        TabBarIcon(width: geometry.size.width/5, height: geometry.size.height/28, systemIconName: "rectangle.3.offgrid.bubble.left", tabName: "FoodFeed")
                        
                        
                    }.frame(width: geometry.size.width, height: geometry.size.height/8).background(Color("TabBarBackground")).shadow(radius: 2 )
                }.edgesIgnoringSafeArea(.bottom).foregroundColor(.white)
                }
            }.navigationBarTitle(Text("Vitameal")).background(Image("bg"))
            }
        }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
struct TabBarIcon: View{
    
    let width, height: CGFloat
    let systemIconName, tabName: String
    var body: some View{
        VStack{
            Image(systemName: systemIconName)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: width, height: height)
                .padding(.top, 10)
                .foregroundColor(.white)
            Text(tabName).foregroundColor(.white).font(.footnote)
            Spacer()
        }
        .padding(.horizontal, -4)
    }
}

For the AppName.swift file, this is what I tried which lead to large amount of space:

Code Block import SwiftUI
@main
struct RiyaVitaMealApp: App {
    var body: some Scene {
        WindowGroup {
            NavigationView{
            ContentView()
            }
        }
    }
}