JSFiddle - React, Tailwind, and code Playground

HTML

<div id="conteiner">
        <div id="header-top">
            <div id="header_type">
                <div id="logo"><img src="http://cs5981.userapi.com/u6318157/e_4f1ce525.jpg"></div> <!-- end logo -->
                       
               <div id="top_navi"> <ul class="header_navigation">
                    <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> <!-- end top_navi-->
    </div> <!-- end header_type-->            
        </div>
        
    <div id="wrap">
         <div id="slider">
            <p>Оборудование цифровых форматов видеозаписи позволяет получать материалы высокого качества и обладает стабильностью функционирования, большой надежностью и эффективностью. Еще одно немаловажное преимущество цифровой видеозаписи - это возможность многократной перезаписи без потери качества.</p>
        </div>
        
        <div id="content">
            <div class="type_1"><p>Цифровые технологии обеспечивают неоспоримые преимущества по сравнению с аналоговыми. Преобразованный в цифровую форму сигнал может сохранять всю информацию, заложенную в аналоговой форме. Современные технологии передачи, записи и хранения цифровых данных практически не подвергают сигнал искажениям.         
                </p> </div>
                
            <div class="type_2">   
                <ul>
                    <li><a href="#">один</a></li>
                    <li><a href="#">два</a></li>
                    <li><a href="#">три</a></li>
                   
                </ul> 
            </div>
                
        </div>         
    </div>
</div>

CSS

body {
    background: #ccc;
}

#conteiner {
    margin: 0 auto;
}

#header-top {
    width: 100%;
    margin-top: 20px;
    background: #fff000;
    border-top: 2px solid red; 
    border-bottom: 2px solid red; 
    display: inline-block;
    vertical-align: middle;
}
#header_type {
    margin 0 auto;
    width: 600px;
    padding: 15px;    
    
}

ul.header_navigation li{
    display: inline;
    margin-left: 15px;   
   
}

#logo{
    float: left;
}

#top_navi{
    float: right;
}

#wrap {
    margin:0 auto;
    margin-top: 10px;            
    width: 600px;
    text-align: justify;
    background: #fff000;
     
}

#content {
    margin-top: 10px;
    background: #fff000;
}

.type_1 {
    width: 80%;
    float: left;
    background: #fff000;
}

.type_2 {
    width: 18%;
    float: right;
    background: #fff000;   
}