Tell me, please, how can I place the phone. is the number above the navigation list? The code is attached. The result is needed as in the picture. 
* { box-sizing: border-box; } .flex { display: flex; } .grid { display: grid; } .textlocation { max-width: 1170px; margin: auto; } a { text-decoration: none; } header { position: relative; background-color: #1a1a1a; border-bottom: 3px solid #fc5700; } .firstpageheader { } .mainlogo { align-items: center; margin: 25px 0 25px 0; } .logotext { margin: 0; padding: 0 0 0 15px; line-height: 1.2em; color: white; font-family: 'Muli', sans-serif; font-weight: 300; font-size: 24px; text-transform: uppercase; } .commsword { font-size: 36px; font-weight: 800; } .mainNav { flex: 1; align-items: flex-end; justify-content: flex-end; } .mainNav ul { margin: 0; list-style-type: none; } .mainNav a { font-family: 'Muli', sans-serif; font-weight: 600; font-size: 14px; color: white; padding-right: 40px; display: inline-block; } .mainNav a:last-child { padding-right: 0; } .mainNav li { border-bottom: 5px solid transparent; padding-bottom: 15px; } .mainNav li:hover { border-bottom: 5px solid #fc5700; padding-bottom: 15px; } .fa-phone { transform: rotate(90deg); } .phonenumber { font-family: 'Muli', sans-serif; font-weight: 800; font-size: 30px; color: #FFF; } <header> <div class="firstpageheader flex textlocation"> <div class="mainlogo flex"> <a href="" class="flex"> <img src="img/logopic.png" class="mainlogopic"> <p class="logotext">United<br> <span class="commsword">Comms</span></p></a> </div> <div class="mainNav flex"> <p class="phonenumber"><i class="fas fa-phone"></i> (256) 152 3658</p> <ul> <a href=""><li>Home</li></a> <a href=""><li>Products</li></a> <a href=""><li>About Us</li></a> <a href=""><li>Services</li></a> <a href=""><li>Blog</li></a> <a href=""><li>Contact Us</li></a> </ul> </div> </div> </header> 
