kivy: Aligning images to boxes

Question

I am trying to align the Images to by Buttons so such that each image has a button placed down below. My current problem is that it does not align properly which I assume has to relate with my the columns specified within my GridLayout. Here is my code for my.kv:

<ScreenManagement>:
    MenuScreen:
        id: name
        name: 'menu'

<MenuScreen>:
    BoxLayout:
        BoxLayout:
            canvas:
                Color:
                    rgba: 184/255, 200/255, 202/255, 1
                Rectangle:
                    pos: self.pos
                    size: self.size

            
            GridLayout:
                cols: 3
                rows: 4
                
                BoxLayout:
                    orientation: 'horizontal'
                    spacing: 15
                    padding: 10
                    Image:
                        source: 'img/image1.jpg'
                        padding :10                    
                        size_hint_x: 0.2
                        allow_stretch: True
                    Image:
                        source: 'img/image2.jpg'
                        padding: 10
                        size_hint_x: 0.2
                        width: 2
                        allow_stretch: True
                    Image:
                        source: 'img/image3.jpg'
                        size_hint_x: 0.2
                        allow_stretch: True
                        
                    Button:
                        size_hint_y: None
                        pos: (10,150)
                        size_hint: None, None
                        size: 250,50
                        spacing: 50
                        #padding: (0, 10, 0, 0)
                        text: 'button2image1'
                        on_press: self.background_color =  0,168/255,137/255,1
                        on_release:
                            root.manager.current = 'watermelon'
                            
                        
                    Button:
                        size_hint_y: None
                        pos: (275, 150)
                        size_hint: None, None
                        size: 250,50
                        spacing: 50
                        text: 'button2image2'
                        on_press: self.background_color =  0,168/255,137/255,1
                        on_release:
                            root.manager.current = 'galia'
                        
                    Button:
                        size_hint_y: None
                        size: 250,50
                        size_hint: None, None
                        pos: (537.5, 150)
                        text: 'button2image3'
                        on_press: self.background_color =  0,168/255,137/255,1
                        on_release:
                            root.manager.current = 'cantaloupe'