html/css - 布局自动留边距

Question

我创建了几个布局，其中一个做错了。我想把布局从红色“正方形”(见下面的截图)变成红蓝“正方形”:

HTML:

<header>

    <div id="container">
        <div id="nav">
            <div class="logo">
                <p>
                    <a href="#"> <span>The</span>&nbsp;Chance </a>
                </p>
            </div>

            <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">Service</a></li>
                <li><a href="#">Project</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>

        <div id="current">
            <h1>charity details</h1>
            <h3>home / charity details</h3>
        </div>
    </div>

</header>

CSS:

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');
body {
    font-family: 'Open Sans', sans-serif;
}


header {
    width: 100%;
    height: 350px;
    background-image: url(../img/background-header.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #0b261a;
    padding-top: 60px;
}

header #container #nav {
    width: 100%;
    display: block;
}

header #container #nav .logo {
    color: #fff;
    display: inline-block;
    float: left;
}

header #container #nav .logo p {
    font-size: 22px;
    font-weight: 500;
}

header #container #nav .logo p a {
    color: #fff;
    text-decoration: none;

}

header #container #nav ul.menu {
    display: inline-block;
    float: right;
}


header #container #nav ul.menu li {
    display: inline-block;
    color: #fff;
    font-weight: 500;
    text-transform: uppercase;
    margin-right: 25px;
}

header #container #nav ul.menu li:last-child {
    margin-right: 0;
}

header #container #nav ul.menu li a {
    color: #fff;
    text-decoration: none;
}

header #container #current {
    display: block;
    width: 100%;
}

header #container #current h1, header #container #current h2,
header #container #current h3, header #container #current h4,
header #container #current h5 {
    color: #fff;
}

/* browser 1680px+ */
@media screen and (min-width:1680px){
    header #container {
        width: 1080px;
        margin: 0 auto;
    }
}

Answer 1

通过将容器设置为相对位置，您可以相对于它绝对放置其他元素。这应该让你开始:

#container {position: relative; }

#current {
 position: absolute;
 top: 200px;
 left: 0px;
}