div右侧的空白区域，宽度为100％属性

Question

div右侧有一个空格，我用作顶栏。我希望它能100％横向覆盖页面，但页面右侧的那个小空间似乎无处可去。

我尝试将padding:0;和margin:0;添加到body属性中，但它没有用。

由于我一直在重新设计页面，因此没有其他CSS在使用。

＆＃13;

＆＃13;

body {

    background-image:url(images/background-awcc.png);
    background-repeat:no-repeat;
    background-size:100%;
    background-attachment: fixed;
    background-position: center; 
    padding: 0 !important;
    margin: 0 !important;

}

/* Top Menu All Pages */

.topmenu {

    padding:30px;
    background-color:rgba(55, 21, 21, 1);
    border-right:solid rgba(55, 21, 21, 1);
    margin-left:-9px;
    margin-top:-9px;
    text-align:center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing : border-box;
}

.topmenulink {

    padding:30px;
    color:antiquewhite;
    text-decoration:none;
}

.topmenulink:visited  {

    text-decoration:none;
    color:burlywood;

}

.topmenulink:hover  {

    background-color:darkgoldenrod;
    color:black;

}

＆＃13;

    <div id="wrapper">
        <div class="topmenu">

            <a class="topmenulink" href="myaccount.php">My Account</a>
            <a class="topmenulink" href="appointments.php">Appointments</a>
            <a class="topmenulink" href="tutors.php">Tutors</a>
            <a class="topmenulink" href="clients.php">Clients</a>
            <a class="topmenulink" href="schedule.php">Schedule</a>
            <a class="topmenulink" href="statistics.php">Statistics</a>
            <a class="topmenulink" href="help.php">Help</a>
            <a class="topmenulink" href="logout.php">Logout</a>

        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

从topmenu classname中删除margin-left -9px

Answer 2

从margin-left: -9px移除.topmenu似乎可以缓解您的问题。

＆＃13;

＆＃13;

body {

    background-image:url(images/background-awcc.png);
    background-repeat:no-repeat;
    background-size:100%;
    background-attachment: fixed;
    background-position: center; 
    padding: 0 !important;
    margin: 0 !important;

}

/* Top Menu All Pages */

.topmenu {

    padding:30px;
    background-color:rgba(55, 21, 21, 1);
    border-right:solid rgba(55, 21, 21, 1);
    margin-top:-9px;
    text-align:center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing : border-box;
}

.topmenulink {

    padding:30px;
    color:antiquewhite;
    text-decoration:none;
}

.topmenulink:visited  {

＆＃13;

<div id="wrapper">
        <div class="topmenu">

            <a class="topmenulink" href="myaccount.php">My Account</a>
            <a class="topmenulink" href="appointments.php">Appointments</a>
            <a class="topmenulink" href="tutors.php">Tutors</a>
            <a class="topmenulink" href="clients.php">Clients</a>
            <a class="topmenulink" href="schedule.php">Schedule</a>
            <a class="topmenulink" href="statistics.php">Statistics</a>
            <a class="topmenulink" href="help.php">Help</a>
            <a class="topmenulink" href="logout.php">Logout</a>

        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;