css - 如何使用媒体查询修复此 ui？

Question

1. 我认为这是重叠的媒体查询问题，但我没有找到任何重叠的媒体查询。
2. 我调整了 menucontainer 和 searchcontainer 的宽度，但没有用。
3. 我以为是那个 searchcontainer 有更大的填充大小，我试图减少和增加 searchcontainer 的填充值，但是没有用。4.当我单击“切换设备工具栏”时，它没有显示这三个容器（searchcontainer、contactcontainer 和 menucontainer）的任何错位，但是当我在 chrome 视图上删除“切换设备”选项时，它们的位置错位了。
4. 这种错位发生在 786px 到 771px 宽度之间。
5. 我想要两个相同的视图，并且该视图可以支持所有设备，包括台式机、平板电脑。
6. 点击这里了解我的代码
7. 这是我的代码`

@media only screen and (min-device-width : 768px) and (max-device-width : 768px), (min-width: 768px) and (max-width: 768px) and (orientation: landscape) {
.MenuContactContainer {
        max-width: 100%;
        width: 100%;
        vertical-align: top !important;
        padding-right: 0px;
        text-align: center !important;
    }

    .MenuContact {
        margin-bottom: 0px;
        margin-top: 0px;
        vertical-align: central;
        padding-right: 10px;
        font-weight: 400;
        font-size: large;
        text-align: center !important;
    }
.search-container {
        width: 102% !important;
        display: inline-block;
        height: 55px;
        margin-left: 0px !important;
    }


    .Hamburger {
        z-index: 257;
        width: 465px;
        height: 41px;
        padding-bottom: 4px;
        margin-left: 16px;
        margin-right: auto;
        margin-top: -53px;
        position: relative;
        border-color: transparent;
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        background: transparent url(../images/hamburger.png) no-repeat center center;
        background-size: contain;
    }

    .searchtextbox {
        height: 32px;
        background-color: #EAB640;
        padding-left: 10px;
        margin-top: -2px;
        margin-bottom: 18px;
        vertical-align: middle;
        width: 270px;
        margin-left: 32px;
    }
}

`

我该如何解决这个问题？请我找出那个问题。

这是错位的三个组成部分都在这里。

这显示在正确位置的“切换设备”模式下。

标签： cssmedia-queries