javascript - css头相关问题

Question

在平板电脑或手机上查看时，黑色导航栏背景的这个问题大约是页面宽度的一半。否则在桌面上工作正常。

<header>
<div class="wrapper">

    <!-- LOGO -->
    <a href="http://www.logicweb.com" title="LogicWeb" class="logo"><img src="/assets/img/logo.png" alt="LogicWeb" style="border:0" /></a>

    <!-- PARTNERS -->
    <a href="https://www.logicweb.com/affiliate" class="btn partners">AFFILIATES</a>

    <!-- CLIENT LOGIN -->
    <a href="https://www.logicweb.com/billing/clientarea.php" class="btn client-login">CLIENT LOGIN</a>

    <!-- LIVE CHAT -->
    <a href="javascript:void(0);" onclick="olark('api.box.expand')" class="btn live-chat">SALES CHAT</a>

    <!-- PHONE NUMBER -->
    <a href="tel:18775644293" class="btn phone-header">1.877.LOGICWEB</a>

</div>  
<div class="clear-both"></div>
    <nav>
        <div class="wrapper">
            <!-- TOP NAV -->
            <ul>
            <li<?php
                    if($homePage == 1) { 
                        echo ' class="is-on"';
                    }
                ?>><a href="/"><span>HOME</span></a></li>
            <li<?php
                    if(stristr($_SERVER["PHP_SELF"], "web-hosting")) { 
                        echo ' class="is-on"';
                    }
                ?>><a href="/web-hosting/"><span>WEB HOSTING</span></a></li>
            <li<?php
                    if(stristr($_SERVER["PHP_SELF"], "resellers")) { 
                        echo ' class="is-on"';
                    }
                ?>><a href="/resellers/"><span>RESELLERS</span></a></li>
            <li<?php
                    if(stristr($_SERVER["PHP_SELF"], "virtual-private-servers")) { 
                        echo ' class="is-on"';
                    }
                ?>><a href="/virtual-private-servers/"><span>VPS</span></a></li>
            <li<?php
                    if(stristr($_SERVER["PHP_SELF"], "dedicated-servers")) { 
                        echo ' class="is-on"';
                    }
                ?>><a href="/dedicated-servers/"><span>DEDICATED SERVERS</span></a></li>
            <li<?php
                    if(stristr($_SERVER["PHP_SELF"], "cloud-hosting")) { 
                        echo ' class="is-on"';
                    }
                ?>><a href="/cloud-hosting/"><span>CLOUD HOSTING</span></a></li>
            <li<?php
                    if(stristr($_SERVER["PHP_SELF"], "other-services")) { 
                        echo ' class="is-on"';
                    }
                ?>>
                <a href="/other-services/email-marketing.php"><span>OTHER SERVICES</span></a>
                <div>
                    <?php include($_SERVER["DOCUMENT_ROOT"].'/other-services/inc/other-sub-nav.php');?>                  
                </div>
            <li<?php
                    if(stristr($_SERVER["PHP_SELF"], "")) { 
                        echo ' class="is-on"';
                    }
                ?>><a href="/other-services/which-web-host.php"><span style="margin-left: 405px">You want IT. We got IT.</a><span style="font-size:8px; margin-top:13px; color:#B9B9B9; margin-left:-8px; float:right">SM</span></span></li>
            </ul>
        </div>
        <div class="clear-both"></div>
    </nav>
</header>

截屏

http://s17.postimage.org/9dpl4pd0f/photo.png

实时站点：www.logicweb.com（在台式机、平板电脑和移动设备上工作是问题出现的地方）

CSS 代码： http: //logicweb.com/assets/css/styles.css

编辑：

CSS 代码

body { background:#F0F0F0; font-family:Helvetica Neue, Helvetica, Arial, sans-serif; color:#535353; }
.wrapper { max-width:1300px; min-width:960px; margin:0 auto; padding:0 40px; }
.clear-both { clear:both; }

header { background:#fff; padding:15px 0 0 0; }
.logo img { float:left; width:230px; height:63px; }
header nav { background:#464646; margin-top:15px; font-size:12px; font-weight:bold; }
.phone { float:right; font-size:22px; font-weight:200; color:#464646; text-shadow:1px 1px 0 rgba(255, 255, 255, 1); padding:0; margin: 3px 10px 0 0 }
.phone a { text-decoration:none; color:#464646; }
.phone a:hover,
.phone a:active { color:#F27500; }

/* TOP NAV */
header nav ul { }
header nav ul li { float:left; list-style-type:none; position:relative; z-index:99999; }
header nav ul li > a { float:left; color:#B9B9B9; text-decoration:none; padding:15px 0; }
header nav ul li > a span { float:left; padding:5px 10px; 
    -webkit-transition:all 0.15s ease-in-out;
    -moz-transition:all 0.15s ease-in-out;
    -o-transition:all 0.15s ease-in-out;
    transition:all 0.15s ease-in-out;
}

Answer 1

在你的<nav>里面有一个<div class="wrapper">

.wrapper {
    margin: 0 auto;
    max-width: 1300px;
    min-width: 960px; /* **bad start for a responsive design** */
    padding: 0 40px;
}