Why tag doesn't fit to child image

I've got a header like that:

<header id="top">

        <a id="logourl" href="/"><img src="/images/logo.jpg" alt="LOGO" id="logo"></a>
        <nav>
            <ul>
                <li id="firstli"><a href="<?php bloginfo('url') ?>">Home</a></li>
                <li><a href="<?php bloginfo('url') ?>/machines">Macchine</a></li>
                <li><a href="<?php bloginfo('url') ?>/resellers">Rivenditori</a></li>
                <li><a href="<?php bloginfo('url') ?>/where">Dove siamo</a></li>
                <li><a href="<?php bloginfo('url') ?>/contact">Contatti</a></li>
            </ul>
        </nav>
    </header>

With the CSS:

header{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
     align-items: center;
    width:100%;

    background-color: #3498DB;

}



#logo{

    box-shadow: 0px 0px 5px #fff;
    border-radius: 50%;
    width: 20%;
}

#logourl{
    margin-top: 10px;
    margin-bottom: 15px;
    display: block;


}

header nav {
    width: auto;
    /*-webkit-align-self: flex-end;
        -ms-flex-item-align: end;
    align-self: flex-end;*/
    margin-bottom: 20px;

}
header nav ul{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
     -ms-flex-direction: row;
    flex-direction: row;
    /*justify-content: space-between;*/
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    list-style: none;
    text-align: center;
}


header nav li {

    text-align: center;
    padding: 5px 10px;
    /*border-right: 2px solid white;*/
    /*border-radius: 10px;*/
    /*margin-right: 10px;*/
    color: white;
    margin-left: 20px;

}header nav li>a {
    margin:0;
    width: 100%;
    height: 100%;
    color: #F2F1EF;
    font-weight: bolder;
        text-transform: uppercase;
    font-size: 25px;
    }

header nav li>a:hover{
    color: white;


}

The problem is that the "a" tag should fit to image size, but that's not true, because it stretches from the left to the middle of the page width, so some nav menu entries wrap to a new even in full screen.