Why are my options for Frames not showing in tkinter?

Question

Here is the code for the UI design that I am making:

from tkinter import *
import random
import time
import sqlite3
from tkinter import simpledialog
from tkinter import messagebox
from tkcalendar import *
from tkinter import ttk
import math
from PIL import Image, ImageTk
import winsound

##-------------Frames setup--------------------------
class VendingApp(Tk):
    def __init__(self):
        Tk.__init__(self)
        self._frame = None
        self.switch_frame(Store)

    def switch_frame(self, frame_class):
        #Destroys current frame and replaces it with a new one.
        new_frame = frame_class(self)
        if self._frame is not None:
            self._frame.destroy()
        self._frame = new_frame
        self._frame.pack()

class Store(Frame):
    def __init__(self, master):
        Frame.__init__(self, master)

        self._images = list()

        img_banner = Image.open("pic/banner.jpg")
        img_banner = img_banner.resize((400, 100), Image.ANTIALIAS)
        banner = ImageTk.PhotoImage(img_banner)

        img_logo = Image.open("pic/sitelogo.png")
        img_logo = img_logo.resize((100, 100), Image.ANTIALIAS)
        logo = ImageTk.PhotoImage(img_logo)

        self._images.append(logo)
        self._images.append(banner)

        ##---------------------Top frame Home------------------------------------
        topFrame = Frame(self, width=500, height=100)
        topFrame.grid(row = 0, column = 0, columnspan = 2)
        topFrame.grid_propagate(False)

        canvas_for_logo = Canvas(topFrame, height=100, width=100, bg='green')  ##logo image
        canvas_for_logo.grid(row=0, column=0, sticky='nesw')
        canvas_for_logo.grid_propagate(False)

        canvas_for_logo.create_image(0, 0, anchor=NW, image=logo)

        canvas_for_banner = Canvas(topFrame, height=100, width=400 ) # banner image
        canvas_for_banner.grid(row=0, column=1, sticky='nesw')
        canvas_for_banner.grid_propagate(False)

        canvas_for_banner.create_image(0, 0, anchor=NW, image=banner)
 ##---------------------------------Midd-------------------

        LeftSide = Frame(self,width = 150, height = 450, relief = RAISED, bg = 'grey')
        LeftSide.grid(row = 1, column = 0)

        RightSide = Frame(self,width = 350, height = 450, bg = 'red')
        RightSide.grid(row = 1, column = 1)

        BottomFrame = Frame(self,width = 500, height = 50, bg = 'black')
        BottomFrame.grid(row = 2, column =0, columnspan = 2)

        test_btn = Button(BottomFrame, command = None, bg = 'green', width = 5, height = 5)
        test_btn.pack()



#----------------------------------------------------------------------------------------
if __name__ == "__main__":
    root = VendingApp()
    #Renames the TITLE of the window
    root.title("Vending machine")
    root.geometry("500x600")
    root.resizable(False, False)
    root.mainloop()

I have a few questions:

1. Why is the RAISE relief on the left frame not showing? (edit: This question is answered)

2. Why does the bg on the left and right frame change but not the bottom one? (edit: this question is answered)

3. if you replace to logo and banner with any picture, I believe that you'd see there is a gap of empty space on both said of the logo, one between the edge of the logo and the app, one between the logo and the banner. Why is it happening? (edit: I did some more research and have finally found the solution for this)

Every response is much appreciated.

Answer 1

Use grid_propagate(0) and test_btn.grid()

    BottomFrame.grid(row=2, column=0, columnspan=2)
    BottomFrame.grid_propagate(0)

    test_btn = Button(BottomFrame, command=None, bg='green', width=5, height=5)
    test_btn.grid()

Answer 2

1. you must add a bd=5 (border size)
2. First do not mix pack() and grid(). Second, when you add a btn to bottom frame, the frame takes the size of the button. You must use BottomFrame.propagate(0) to ignore the button size.