Header width not 100% with CSS and Viewport

Question

I've tried the Viewport meta tag to fix this bug but I'm not so sure why it's occuring. Here's a screenshot of the problem:

Here's the viewport code I've tried:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Here's the CSS:

#header{
background: #afafaf url(images/complit/header.jpg) top left repeat-x;
text-align: left;
text-shadow: 0 1px 0 #ddd;
zoom: 1;
min-width: 100%;
}

#top{
height:5px;
background: #222;
}

.subhead{
width: 90%;
min-width: 1020px;
margin: 0 auto;
height:44px;
padding: 8px 0px;
zoom: 1;
}

#userbar{
background: transparent url(images/complit/userbar.png) top left repeat-x;
text-align: left;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
color: #858584;
text-shadow: 0 -1px 0 #000;
font-size: 12px;
}

Here's the header template:

            <div name="top" id="top"></div>
                <div id="header">
                    <div class="subhead">
                        <div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
                        <div class="top_menu">
                            <ul class="toplinks">
                                <div class="endsep"></div>
                                <li><a href="{$mybb->settings['homeurl']}"><i class="fa fa-home"></i> <strong>Home</strong><br /><span class="smalltext">CompLit Complice</span></a></li>
                                <li><a href="{$mybb->settings['bburl']}"><i class="fa fa-globe"></i> <strong>Forums</strong><br /><span class="smalltext">Get Involved</span></a></li>
                                <li><a href="{$mybb->settings['bburl']}/memberlist.php"><i class="fa fa-group"></i> <strong>Members</strong><br /><span class="smalltext">Our Board's Users</span></a></li>
                                <li><a href="{$mybb->settings['bburl']}/calendar.php"><i class="fa fa-calendar"></i> <strong>Calendar</strong><br /><span class="smalltext">Important Dates</span></a></li>
                                <li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><i class="fa fa-info-circle"></i> <strong>Help</strong><br /><span class="smalltext">Info & Resources</span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div id="userbar">
                    <div class="subuserbar">
                        <div class="search">
                            <form action="search.php" method="post">
                                <form method="post" action="search.php">
            <input type="hidden" name="action" value="do_search" />
            <input type="hidden" name="postthread" value="1" />
            <input type="hidden" name="forums" value="all" />
            <input type="hidden" name="showresults" value="threads" />
            <input type="text" name="keywords" value="" placeholder="Type and hit enter..." class="searchbox" />
            </form>
                            </form>
                        </div>
                        {$welcomeblock}
                    </div>
                </div>
                <div id="container">
                    <hr class="hidden" />
                    <br class="clear" />
                    <div id="content">
                        {$pm_notice}
                        {$bannedwarning}
                        {$bbclosedwarning}
                        {$unreadreports}
                        {$pending_joinrequests}
                        <navigation>
                        <br />
                        {$board_messages}<br />

Thanks.

Here is a link: http://complit-complice.net/forums/index.php

Answer 1

Without a link to the site, we can only guess. But from the code you posted, it's likely to be the width you've set on .subhead, which is much wider that its container on small screens.

.subhead {
    min-width: 1020px;
}

EDIT: OK, with the link, I see what's happening. ry adding this to your style sheet:

#userbar, #header, #top {min-width: 1024px;}