Привет у меня есть сайт на котором я делал меню в котором можно отсортировать товар.Это меню должно состоять с двух блоков, но правый блок ушел ниже левого и я не пойму почему так происходит.Проект делаю на React.
Вот так выглядит сейчас мой сайт. 
Сдесб вы можете найти полный репозиторий проекта https://github.com/fpsstyle228/portland.com
СSS
@font-face { font-family: 'Montserrat-regular'; src: url('fonts/Montserrat Regular.eot'); src: url('fonts/Montserrat Regular.eot?#iefix') format('embedded-opentype'), url('fonts/Montserrat Regular.woff2') format('woff2'), url('fonts/Montserrat Regular.woff') format('woff'), url('fonts/Montserrat Regular.ttf') format('truetype'), url('fonts/Montserrat Regular.svg#Montserrat Regular') format('svg'); font-weight: 400; font-style: normal; font-stretch: normal; unicode-range: U+0020-2044; } @font-face { font-family: 'Montserrat-SemiBold'; src: url('fonts/Montserrat SemiBold.eot'); src: url('fonts/Montserrat SemiBold.eot?#iefix') format('embedded-opentype'), url('fonts/Montserrat SemiBold.woff2') format('woff2'), url('fonts/Montserrat SemiBold.woff') format('woff'), url('fonts/Montserrat SemiBold.ttf') format('truetype'), url('fonts/Montserrat SemiBold.svg#Montserrat SemiBold') format('svg'); font-weight: 600; font-style: normal; font-stretch: normal; unicode-range: U+0020-2044; } *{ font-family: 'Montserrat-SemiBold', sans-serif; } a { text-decoration: none; } li { text-decoration: none; list-style: none; } hr { border: none; background-color: #B9BED1 !important; color: #B9BED1 !important; height: 1px; } input,select {outline:none;} input:-moz-placeholder { color: #999999; text-align: center; padding-left: 15px; font-size: 12px } input::-moz-placeholder { color: #999999; text-align: center; padding-left: 15px; font-size: 12px } input:-ms-input-placeholder { color: #999999; text-align: center; padding-left: 15px; font-size: 12px } input::-webkit-input-placeholder { color: #999999; padding-left: 15px; font-size: 12px } /* ______________________________________________________________________________ШАПКА САЙТА(Header.js) */ .MenuButtons { margin-top: 37px; } .MenuButtons>li { display: inline-block; } .MenuButtons>li>a { font-size: 14px; margin-right: 29px; color: #343e5c; font-weight: 400; font-family: 'Montserrat-SemiBold', sans-serif; } .MenuButtons>li>div>span { font-size: 15px; padding-right: 7px; } .MenuButtons>li>img { margin-right: 157px; } .Cart-container { display: inline-block; position: relative; } .Cart-span { display: inline-block; background: #ccc; color: #000; text-align: center; border-radius: 50%; padding: 50% 0; width: 100%; position: absolute; top: 50%; transform: translateY(-50%); } .Cart-text { position: relative; padding: 0em 0.65em; } .CartMain { display: inline-block; margin-right: 29px; } .HeaderMain { display: inline; color: #343e5c; font-family: 'Montserrat-SemiBold', sans-serif; } .HeaderBtn { font-family: 'Montserrat-SemiBold', sans-serif; width: 85px; height: 32px; border-radius: 16px; border: 2px solid #e3e8f0; background-color: #fff; font-size: 13px; color: #343e5c } .DropMenu { margin-left: 115px; font-size: 20px; } .MenuHeader { margin-right: 75px; } @media screen and (max-width:1159px) { .MenuButtons>li>img { margin-right: 75px; } } @media screen and (max-width:1073px) { .DropMenu { margin-left: 35px; } } @media screen and (max-width:991px) { .MenuButtons>li>a { margin-right: 15px; } } @media screen and (max-width:991px) { .MenuButtons>li>a { display: none; } } @media screen and (max-width:550px) { .MenuHeader { margin-right: 25px; } .MenuButtons>li>img { margin-right: 40px; } .DropMenu { margin-left: 5px; } } @media screen and (max-width:443px) { .MenuButtons>li>img { display: none; } .CartMain { margin-left: 50px; } } .SecondMenuMain { margin-left: 115px; margin-top: 0px; } .SecondMenu>li { display: inline-block; } .SecondMenu>li>a, .SecondMenu>li>div>input { text-decoration: none; color: #b9bed1; margin-right: 30px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.1px; font-family: 'Montserrat-SemiBold', sans-serif; } .SecondMenu>li>a:hover { color: #343e5c; font-family: 'Montserrat-SemiBold', sans-serif; } .SecondMenu>li>div>input { font-family: 'Montserrat-SemiBold', sans-serif; border: none; margin-left: 13px; text-decoration: none; color: #b9bed1; padding-top: 0px; } .SecondMenu>li>div>input:focus { border: none; text-decoration: none; } .Support { padding-left: 280px; } .Bordered { border-left: 1px solid #b9bed1; border-right: 1px solid #b9bed1; } .Search { margin-left: 21px; } /* Слайдер,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, */ .carousel-indicators li { border-radius: 50%; width: 8px !important; height: 8px !important; background-color: #fff; } .carousel-indicators .active { background-color: #fefefe; } .carousel-control-prev-icon, .carousel-control-next-icon { color: #fefefe; } .carousel-control-prev-icon{ padding-left: 183px !important; } .carousel-control-next-icon{ padding-right: 183px !important; } .carousel-control-prev:hover { color: #fefefe; } .carousel{ height:500px !important; } /* ThirdMenu??????????????????????????????????????????????????????????????????????????????????????????????????????? */ .ThirdMenuMain{ background-color: #e4e5e7; padding-top: 50px; padding-bottom: 30px; } .ThirdMenu{ margin-left: 115px; margin-right: 115px; } .ThirdMenu > ul > li{ display: inline-block; } .ThirdMenu-WhiteBox-1{ background-color: #fff; width: 245px; height:56px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .ThirdMenu-WhiteBox-1 > span{ font-family: 'Montserrat-SemiBold', sans-serif; font-size: 11px; letter-spacing: 1.1px; text-align: left; color: #a1a8bd; margin-left: 20px; margin-right: 49px; margin-top: 24px; margin-bottom: 23px; } .ThirdMenu-WhiteBox-1 > select{ border: none; font-size: 11px; font-family: 'Montserrat-SemiBold', sans-serif; letter-spacing: 1.1px; color: #343e5c; width: 107px; margin-top: 20px; margin-bottom: 24px; } .ThirdMenu-WhiteBox-1 > select > option{ font-size: 11px; font-family: 'Montserrat-SemiBold', sans-serif; letter-spacing: 1.1px; color: #343e5c; } .ThirdMenu-WhiteBox-2{ background-color: #fff; width: 693px; height: 56px; margin-left: 1px; } .ThirdMenu-WhiteBox-2 > span { font-family: 'Montserrat-SemiBold', sans-serif; font-size: 11px; letter-spacing: 1.1px; text-align: left; color: #a1a8bd; margin-left: 20px; margin-right: 12px; } .Tablet{ width: 163px; height: 32px; border-radius: 16px; background-color: #f0f2f7; border: solid 1px #e3e8f0; } .Price{ width: 64px; height: 32px; border-radius: 16px; background-color: #f0f2f7; border: solid 1px #e3e8f0; } .Price-{ margin-left: 6px !important; margin-right: 6px !important; } .Checbox-ThirdMenu{ margin-left: 37px; } ThirdMenu.Js
import React, { Component } from 'react'; import '../App.css'; class ThirdMenu extends Component { render() { return( <div className="ThirdMenuMain"> <div className="ThirdMenu"> <ul> <li> <div className="ThirdMenu-WhiteBox-1"> <span>SORT BY</span> <select name="" id=""> <option value="best-match">BEST MATCH</option> <option value="popularity">POPULARITY</option> <option value="first-cheap">FIRST CHEAP</option> <option value="first-expensive">FIRT EXPENSIVE</option> </select> </div> </li> <li> <div className="ThirdMenu-WhiteBox-2"> <span>KEYWORDS</span><input type="text" placeholder="Tablet" className="Tablet"/> <span>PRICE</span><input type="text" className="Price" /><span className="Price-">-</span><input type="text" className="Price"/> <input type="checkbox" name="" id="" className="Checbox-ThirdMenu"/><span>Free Shipping</span> </div> </li> <li></li> </ul> </div> </div> ); } } export default ThirdMenu; Header.js
import React, { Component } from 'react'; import '../App.css'; import FaAlignJustify from 'react-icons/lib/fa/align-justify'; import FaShoppingCart from 'react-icons/lib/fa/shopping-cart'; import FaSearch from 'react-icons/lib/fa/search'; import Slider from "./Slider"; class Header extends Component { render() { return( <div> <div className="HeaderMain"> <div className="DropMenu" > <ul className ="MenuButtons" id="TopNav" > <li className="MenuHeader"><FaAlignJustify /></li> <li className="Visible"><img src="/images/portland.jpg" alt="portlandlogo"/></li> <li><a href="#">Home</a></li> <li><a href="#">Devices</a></li> <li><a href="#">Delivery & Payment</a></li> <li><a href="#">Guarantee</a></li> <li><a href="#">About Us</a></li> <li className="Visible"><div className="CartMain"> < FaShoppingCart /><span>Cart</span> <div className="Cart-container"><span className="Cart-span"></span><span className="Cart-text">0</span></div></div></li> <li className="Visible"><button className="HeaderBtn">Sign in</button></li> </ul> </div> <hr/> <div className="SecondMenuMain"> <ul className="SecondMenu"> <li><a href="#">TOP SALES</a></li> <li><a href="#">BRAND FOCUS</a></li> <li><a href="#">HI-TECH</a></li> <li><a href="#">BEST SELLERS</a></li> <li><a href="#">PROJECTS</a></li> <li><a href="#" className="Support">SUPPORT</a></li> <li className="Bordered"><div><FaSearch className="Search" /><input placeholder="I`m looking for..."/></div></li> </ul> </div> <div> </div> <Slider /> </div> </div>); } } export default Header; 
