A few questions about landing page header layout. How to make a menu?

Question

Layout

Hello. I'm laying out my first layout and I chose this for practice: www.freepsdhtml.com/download-mogo-free-one-page-ps... I'm currently laying out the page title (close-up):

spoiler

At the moment I'm stuck at the very beginning and I can't make the menu. In chrome, the header looks like this:

spoiler

Here is what I managed to code:

spoiler

<header>
    <div class="container">
        <div class="header_menu clearfix">
                <p>MoGo</p>
                <ul>
                    <li class="text_menu_item">
                        <a href="#">about</a>
                    </li>
                    <li class="text_menu_item">
                        <a href="#">service</a>
                    </li>
                    <li class="text_menu_item">
                        <a href="#">work</a>
                    </li>
                    <li class="text_menu_item">
                        <a href="#">blog</a>
                    </li>
                    <li class="text_menu_item">
                        <a href="#">contact</a>
                    </li>
                    <img src="images/1) header/shopping-cart-menu.png" id=cart_icon height="15" width="18"/>
                    <img src="images/1) header/magnifying-glass-menu.png" id=glass_icon" height="18" width="18"/>
                </ul>
            </nav>
        </div>
    </div>
</header>

body {
    padding: 0px;
    margin: 0px;
}

header {
    background: url("../images/1) header/header.jpg") no-repeat center top/cover;
    height: 600px;
}

.container{
    width: 1200px;
    margin: 0 auto;
}

.container .header_menu {
    font-family: 'Montserrat', sans-serif;
    color: white;
}

.clearfix:after {
    content: '';
    display: table;
    width: 100%;
    clear: both;
}

.container .header_menu p{
    font-size: 30px;
    font-weight: bold;
    float: left;
}

nav{
    float: right;
}

#cart_icon{
    list-style: none;
    float: left;
    margin-right: 40px;
}

#glass_icon{
    list-style: none;
    float: left;
    margin-left: 55px;
}

.text_menu_item{
    list-style: none;
    float: left;
    margin-right: 40px;
}

.text_menu_item a{
    color: white;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    text-transform: uppercase;
}

As you can see from the picture, it doesn't look very similar to me. And I have the following questions:
1) in the header_menu block, how can I place the p paragraph and the ul list in such a way that they are located on the same line?
2) How can I stretch the p and ul components so that the MoGo logo is on the right side of the container, and the menu in the ul is on the left side?
3) How can I align the MoGo logo and menu options so that they are on the same line?
4) And the last question: can you recommend me how to make highlighted menus with a strip like on the layout?

Answer 1

Your html markup is lame. Missing opening nav tag
Pictures inside ul tag
What is this ....? ((

<img src="images/1) header/shopping-cart-menu.png" id=cart_icon height="15" width="18"/>
<img src="images/1) header/magnifying-glass-menu.png" id=glass_icon" height="18" width="18"/>

images/1) header/shopping-cart-menu.png - I see such a path for the first time.
Don't you think that quotes are missing?
There is something so terrible in CSS that nothing works in fiddle )
https://jsfiddle.net/ouodkeLn/204/
This is about centering the menu

Answer 2

Tie with floats. Layout with flex. Explore grids along the way.
1. So,

display:flex;
justify-content: space-between;

https://html5book.ru/css3-flexbox/
2.
3.
4. ummm... border-color? What is the difficulty?
You can pseudo-element even if the bar is narrower than the text.

Answer 3

Thanks everyone for your answers. I got acquainted with flex and it is much better than working with float and clearfix:
now my code and page look like this

html

:

<header>
    <div class="container">
        <div class="header_full">
            <p>MoGo</p>
            <div class="header_menu">
                <nav>
                    <li class="text_menu_item">
                        <a href="#">about</a>
                    </li>
                    <li class="text_menu_item">
                        <a href="#">service</a>
                    </li>
                    <li class="text_menu_item">
                        <a href="#">work</a>
                    </li>
                    <li class="text_menu_item">
                        <a href="#">blog</a>
                    </li>
                    <li class="text_menu_item">
                        <a href="#">contact</a>
                    </li>
                </nav>
                <img src="images/1) header/shopping-cart-menu.png" id="cart_icon" height="15" width="18"/>
                <img src="images/1) header/magnifying-glass-menu.png" id="glass_icon" height="18" width="18"/>
            </div>
        </div>
    </div>
</header>

css

*{
    padding: 0px;
    margin: 0px;
}

header {
    background: url("../images/1) header/header.jpg") no-repeat center top/cover;
    height: 600px;
}

.container{
    width: 1200px;
    margin: 0 auto;
}

.container .header_full {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: 'Montserrat', sans-serif;
    color: white;
}

.container .header_menu{
    display: flex;
    align-items: normal;
}

.container .header_menu nav{
    display: flex;
    align-items: baseline;
}

.container .header_full p{
    font-size: 30px;
    font-weight: bold;
    margin-top: 20px;
}

#cart_icon{
    margin-right: 55px;
}

.text_menu_item{
    list-style: none;
    margin-right: 40px;
}

.text_menu_item a{
    color: white;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    text-transform: uppercase;
}

screenshot