JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mainHeader">
        <div class="header">
            <div class="topHeader">
                <img src="images/header/mrd.png" alt="МРД" />
                <ul>
                    <li><a href="/">О компании</a></li>
                    <li><a href="/">Новости</a></li>
                    <li><a href="/">Каталог</a></li>
                    <li><a href="/">Партнеры</a></li>
                    <li><a href="/">Контакты</a></li>
                </ul>
            </div>
            <div class="Slider"></div>
            <div class="bottomHeader"></div>
        </div>    
    </div>

CSS

@import url(reset.css);

body {
    font-family:Verdana;
    min-width: 1000px;
}

.mainHeader {
    background:#F4E4D6;
    border-top:1px solid #F7F3E9;
}

.header {
    max-width:1500px;
    outline:1px solid green;
    height:622px; /* Убрать */
    margin:0 auto;
}

.topHeader {
    height:50px;
    outline:1px solid blue;
    font-family:"Myriad Pro", sans-serif;
}

.topHeader img {
    float:left;
}

.topHeader ul {
    float:right;
    margin:20px;
}

.topHeader ul li {
    float:left;
    font-size:18px;
}

.topHeader ul li a {
    text-decoration:none;
    display:block;
    color:#47494a;
    padding: 9px 16px 10px;
}

.topHeader ul li a:hover {
    background:url(../images/header/liHover.png) no-repeat;
    color:#fff;
}