响应式标题

Question

我找到了这个网站：https://www.picmonkey.com/，想了解响应式导航技术是如何完成的。在全屏幕上，徽标，图标菜单和注册栏均匀分布，当您将屏幕缩小到菜单响应完全之前，三个部分（徽标，图标菜单和注册栏）保持均匀的百分比远离彼此。

我已经创建了导航的外壳并且想知道，这只是让这些项占据屏幕的某些百分比的特征还是一个简单的边距 - 左/浮？

*
{
    padding: 0;
    margin: 0;
}

#header
{
    width: 100%;
    min-height: 87px;
    border-bottom: 1px solid #EFEFEF;
}

#header-fixedWidth
{
    width: 92%;
    min-height: 87px;
    margin: 0 auto;
}

#picMonkeyLogo
{
    margin-top: 23px;
    margin-left: 5px;
    margin-right: 50px;
    float: left;
}

#icon-menu
{
    min-height: 87px;
    width: 300px;
    float: left;
    margin-left: 150px;
    
}

#icon-menu ul
{
    list-style: none;
}

#icon-menu ul li
{
    min-height: 87px;
    float: left;
    width: 70px;
    font-family: 'Lato', sans-serif; 
    font-weight: bold;
    text-align: center;
    color: rgb(76, 76, 76);
}

#icon-menu ul li img
{
    margin-top: 10px;
    margin-bottom: 5px;
}

<div id="header">
            <div id="header-fixedWidth">
                <img src="Images/logo.png" alt="picMonkeyLogo" id="picMonkeyLogo" />
                <div id="icon-menu">
                    <ul>
                        <li>
                            <img src="Images/iconMenu/edit.png" alt="editIcon" />
                            <p>Edit</p>
                        </li>
                        <li>
                            <img src="Images/iconMenu/touchUps.png" alt="touchUpIcon" />
                            <p>Touch Up</p>
                        </li>
                        <li>
                            <img src="Images/iconMenu/design.png" alt="designIcon" />
                            <p>Design</p>
                        </li>
                        <li>
                            <img src="Images/iconMenu/collage.png" alt="collageIcon" />
                            <p>Collage</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>