Wordpress automatyczne dodawanie do menu

Witam, jestem w trakcie tworzenia strony, tak właściwie to stworzyłem statyczną i uczę się ją zgrać z WordPressem. Stworzyłem poziomą nawigację na stronie, wszystko układa się tak jak ma być, wyflexowane, więc w razie dodania większej ilości linków, obiekty automatycznie się zmniejszą. Problem polega na tym że po próbie zautomatyzowania z wordpressem - owszem wszystko działa, ale niestety wordpress układa linki w pionie, a nie w poziomie (statycznie działa wszystko)

Część kodu: 

 

<div id="navi"><?php

		$defaults = array(
        'menu' => '',
		'container' => 'nav',
		'container_class' => 'links',
		'container_id' => '',
		'menu_class' => 'menu',
		'menu_id' => '',
		'echo' => true,
		'fallback_cb' => 'wp_page_menu',
		'before' => '',
		'after' => '',
		'link_before' => '',
		'link_after' => '',
		'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
		'item_spacing' => 'preserve',
		'depth' => 0, 'walker' => '',
        'theme_location' => 'main',
		);

		wp_nav_menu( $defaults );

		?><nav class="links"><li><a href="#">Strona Główna</a></li><li><a href="#">O mnie</a></li><li><a href="#">Oferta</a></li><li><a href="#">Bajki i Baśnie</a></li><li><a href="#">Aktualności</a></li><li><a href="#">Blog</a></li><li><a href="#">Kontakt</a></li></nav></div>

#navi
{

    margin: auto;
	font-family: 'Sansita', sans-serif;
	width:80%;
	color:red;
	padding: 10px 0;
    border-bottom:3px solid gray;

}
#navi .links
{
    display: flex;
    justify-content:space-around;
    flex-wrap: nowrap;
    flex-direction:row;

}
#navi .links li
{
	padding:0;
	margin:0;
	list-style-type:none;
	font-size:16px;
	line-height:200%;
}

#navi .links li a
{
    color:black;
    text-decoration: none;
}
#navi .links li a:hover
{
color:#8AC934;
}

DODATKOWO DORZUCAM SCREENA