Home>

I am making a system like a news site through practice.
When the blue human icon is placed on the left side of the word "Sign in", the shape of the global navigation will collapse as shown below. If i understand, please tell me.

The broken figure ↓

Figure I want to complete ↓

Applicable source code
<! DOCTYPE html>
<html>
    <head>
     <meta content = "en">
     <meta charset = "utf-8">
     <style type = "text/css">
         .globalnav ul li {
             list-style: none;
             width: 150px;
             float: left;
         }
         .globalnav ul {
             margin: 0;
             padding: 0;
             display: flex;
             align-items: center;
         }
         li + li {
             border-left: 1px solid # 333;
             text-align: center;
         }
         a {
             text-decoration: none;
         }
    </style>
    </head>
    <body>
        <nav>
            <ul>
                <li><img src = "newslogo.png" width = "100" height = "60"></li>
                <li><a href = "#"><img src = "signin.png" width = "30" height = "30">Sign in</a></li>
                <li><a href = "#">News</a></li>
                <li><a href = "#">Sport</a></li>
                <li><a href = "#">Weather</a></li>
                <li><a href = "#">i Player</a></li>
                <li><a href = "#">TV</a></li>
                <li><a href = "#">More</a></li>
            </ul>
        </nav>
    </body>
</html>
Tried

Even if you put a blue humanoid icon image in the nav element,
Going out of the nav element didn't work.

Supplemental information (FW/tool version etc.)

Editor: Brackets
OS: windows10
Browser: Google Chrome