Menu logo at center text left & right include mobile view

Hi,
i have a code here that is working but i still cant figure how to get a space between the text
example:
Home(space)(space)About(space)(space)[LOGO IMAGE](space)(space)Categories(space)(space)Find us
means the gap between the text need to be bigger.
any code that i can use? thanks!

btw im using this code to make my menu:

@media only screen and (min-width: 780px) {
/*In the below code nth-child(x) the value of x should be half the number of total menu items*/
#top #header .av-main-nav li:nth-child(2) {
  /* Adjust the width of the logo */
    margin-right:300px;
}

#header .main_menu {
    /*background: gold;*/
    width: 100%;
    left: 20%;
    transform: translateX(-20%);
}

.av-main-nav-wrap {
    left: 50%;
    transform: translateX(-50%);
}

#header_main .avia-menu-text {
    font-size: 25px;
}
#header .logo {
    left: 50%;
    transform: translateX(-50%);
    z-index:999;
}

#header .logo img {    
    top: 50%;
    transform: translateY(-50%);
    max-width: 100px;  
}