子元素不包含在父标题中

Question

目标

• 将 header__info 包含在父级中，即使页面方向发生变化或浏览器窗口的比例发生变化

问题

我有一个父标题，在它上面我有一个子 div .header__info，其中包含有关项目的信息：年份、标题、描述和几个按钮。 例如，当您在浏览器中将页面放大至 125% 时，header__info 不会保留在父级 header 中。

我尝试通过切换使用 height: 100vh 来修复标题的高度，然后将 html、body 和父级 header 的高度设置为 100%，但这也没有奏效.

/*----------------------------------
VARIABLES
----------------------------------*/
/*----------------------------------
FUNCTIONS
----------------------------------*/
/*----------------------------------
MIXINS
----------------------------------*/
/*----------------------------------
PLACEHOLDERS
----------------------------------*/
/*----------------------------------
TYPOGRAPHY
----------------------------------*/
/*----------------------------------
FONTS & WEIGHTS
----------------------------------*/
/*----------------------------------
COLORS
----------------------------------*/
/*----------------------------------
SHADES OF GREY
----------------------------------*/
/*----------------------------------
BASE
----------------------------------*/
html {
  font-family: "Open Sans";
  font-size: 62.5%;
  /* 10px browser default */ }

body {
  margin: 0; }

h1 {
  font-size: 18rem;
  font-family: "Oswald";
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  line-height: 1.4; }

h2 {
  font-weight: 700;
  font-size: 1.6rem;
  text-align: center;
  margin: 0;
  text-transform: uppercase; }

h3 {
  font-size: 2rem; }

a {
  text-decoration: none; }

/* Large devices */
/* Large devices */
/* Medium devices */
/* Medium devices */
/* Small devices */
@media (max-width: 480px) {
  h1 {
    line-height: 1.1;
    margin-top: 30px; } }

/* Small devices */
/*----------------------------------
GRID
----------------------------------*/
/*----------------------------------
BOX SIZING
----------------------------------*/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/*----------------------------------
CLEARFIX
----------------------------------*/
.clearfix:after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: " ";
  font-size: 0; }

* html .clearfix {
  zoom: 1; }

/* IE6 */
*:first-child + html .clearfix {
  zoom: 1; }

/* IE7 */
.is-bold {
  font-weight: 700; }

.is-grey {
  color: #aaa; }

.is-strikethrough {
  text-decoration: line-through;
  color: #c62828; }

.is-hidden {
  opacity: 0; }

/* Large devices */
/* Large devices */
/* Medium devices */
/* Medium devices */
@media (max-width: 640px) {
  .is-hidden {
    display: none; } }

/* Small devices */
/* Small devices */
/*----------------------------------
HEADER
----------------------------------*/
header {
  width: 100vw;
  height: 100%;
  min-height: 100vh;
  position: relative;
  background-image: url("/src/img/snowglobe1.jpg");
  background-size: cover;
  background-position: center;
  position: relative; }

.header__info {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%); }

.header__credit {
  font-weight: 400;
  margin: 0;
  position: absolute;
  bottom: 0;
  right: 0;
  color: #fff;
  padding: 30px;
  padding-right: 45px; }

.header__year {
  color: #fff;
  font-weight: 700;
  font-size: 1.6rem;
  text-align: center;
  margin: 0;
  text-transform: uppercase;
  /* display: inline-block; */
  width: 120px;
  margin: 0 auto;
  padding-bottom: 2px;
  border-bottom: 4px solid #c62828; }

.header__intro {
  color: #fff; }

.header__description {
  text-align: center;
  color: #aaa;
  color: #212121;
  color: #fff;
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: 400;
  width: 60%;
  margin: 0 auto; }

.header__buttons {
  text-align: center;
  margin-top: 45px; }

/* Large devices */
@media (max-width: 1200px) {
  .header__info {
    width: 60%; } }

/* Large devices */
@media (max-width: 1024px) {
  .header__info {
    width: 75%; } }

/* Medium devices */
@media (max-width: 800px) {
  .header__info {
    width: 80%; } }

/* Medium devices */
@media (max-width: 768px) {
  .header__intro {
    line-height: 1.1;
    margin-top: 30px;
    margin-bottom: 45px; } }

/* Custom query */
@media (max-width: 700px) {
  .header__buttons {
    margin-left: 25px; } }

/* Medium devices */
@media (max-width: 640px) {
  .header__intro {
    font-size: 14rem; }
  .header__description {
    font-size: 1.6rem;
    width: 90%; }
  .header__credit {
    display: none; } }

/* Small devices */
@media (max-width: 480px) {
  .header__buttons {
    margin-left: 0;
    position: relative;
    left: 3%; }
  .header__description {
    width: 100%; } }

/* Small devices */
@media (max-width: 360px) {
  .header__buttons {
    position: relative;
    left: -2%; } }

/* Small devices */
@media (max-width: 340px) {
  .header__buttons {
    position: relative;
    left: -4%; } }

/* Small devices */
@media (max-width: 320px) {
  .header__buttons {
    position: relative;
    left: -6%; } }

/*----------------------------------
FOOTER
----------------------------------*/
/*----------------------------------
SIDEBAR
----------------------------------*/
.sidebar__title {
  color: #212121;
  font-size: 1.4rem;
  font-weight: 900;
  font-family: "Roboto";
  margin-left: 15px;
  margin-bottom: 0;
  margin-top: 45px;
  text-transform: uppercase;
  padding-bottom: 5px;
  display: inline-block; }

.sidebar__note {
  margin-left: 15px;
  width: 200px;
  margin-bottom: 30px; }

.sidebar__byline,
.sidebar__caveat {
  font-size: 1.4rem; }

.sidebar__editor,
.sidebar__byline {
  display: none; }

aside {
  background: #f7f7f7;
  width: 20vw;
  padding-bottom: 45px;
  min-width: 250px;
  padding-left: 45px; }

.all {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 45px; }

/* Large devices */
/* Large devices */
/* Medium devices */
/* Medium devices */
@media (max-width: 640px) {
  aside {
    display: none; } }

/* Small devices */
/* Small devices */
.destination__group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin-bottom: 60px; }

.destination {
  border: 1px solid #aaa;
  width: 25vw;
  margin-right: 30px;
  height: 350px;
  border-radius: 3px;
  margin-bottom: 30px;
  position: relative;
  background: #ddd;
  background-size: cover;
  cursor: pointer; }

.destination--ad {
  cursor: default; }

.destination--kimmswick {
  background-image: url("/src/img/kimmswick.jpg"); }

.destination--stcharles {
  background-image: url("/src/img/st-charles.jpg"); }

.destination--chesterfield {
  background-image: url("/src/img/chesterfield.jpg"); }

.destination--centralwestend {
  background-image: url("/src/img/centralwestend.jpg"); }

.destination--clayton {
  background-image: url("/src/img/clayton.jpg"); }

.destination--cherokee {
  background-image: url("/src/img/cherokee.jpg"); }

.destination--downtown {
  background-image: url("/src/img/downtown.jpg"); }

.destination--maplewood {
  background-image: url("/src/img/maplewood.jpg"); }

.destination--edwardsville {
  background-image: url("/src/img/edwardsville.jpg"); }

.destination--webster {
  background-image: url("/src/img/webster.jpg"); }

.destination--delmarloop {
  background-image: url("/src/img/delmarloop.jpg"); }

.destinations__header {
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.6rem;
  font-family: "Open Sans";
  margin-bottom: 30px; }

.destination__info {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 30px; }

.destination__overlay {
  background-color: rgba(0, 0, 0, 0.2);
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%; }

.destination__tease {
  font-family: "Roboto";
  font-size: 1.2rem;
  text-transform: uppercase;
  margin-bottom: 5px;
  color: #fff; }

.tease--explainer {
  background: #c62828;
  color: #fff;
  border: none; }
  .tease--explainer p {
    font-size: 1.6rem;
    text-transform: none; }

.destination__name {
  font-family: "Merriweather";
  font-size: 3rem;
  font-weight: 900;
  margin: 0;
  color: #fff; }

.destination__tease,
.destination__name {
  z-index: 999;
  position: relative; }

.destination__buy--item,
.destination__todo--item {
  display: block;
  text-align: left;
  margin-bottom: 15px;
  list-style-type: decimal;
  font-size: 1.8rem;
  line-height: 1.8; }
  .destination__buy--item a,
  .destination__todo--item a {
    text-decoration: none;
    color: #999;
    border-bottom: 2px solid #999; }
    .destination__buy--item a:hover,
    .destination__todo--item a:hover {
      color: #212121;
      border-bottom: 2px solid #212121; }
  .destination__buy--item span,
  .destination__todo--item span {
    color: #c62828; }

.destination__visit,
.destination__things {
  font-family: "Merriweather";
  font-size: 3rem;
  font-weight: 900;
  color: #212121;
  margin-bottom: 30px;
  padding-bottom: 5px;
  border-bottom: 1px solid #212121; }

.destination--activities {
  width: 50%;
  margin: 0 auto; }

.destination__teaser {
  font-size: 2rem;
  color: #212121;
  margin-bottom: 30px; }

.destination__title {
  font-family: "Merriweather";
  font-size: 5rem;
  font-weight: 900;
  margin-bottom: 0; }

.destination__thing--title {
  font-family: "Roboto";
  font-size: 1.6rem;
  text-transform: uppercase;
  margin-bottom: 15px;
  color: #c62828; }

.destination__thing {
  margin-bottom: 45px; }

/* Large devices */
@media (max-width: 1200px) {
  .destination--activities {
    width: 60vw; }
  .destination {
    width: 28vw;
    margin-right: 15px; } }

/* Large devices */
@media (max-width: 1024px) {
  .destination {
    width: 46vw;
    margin: 0 auto;
    margin-right: 15px;
    margin-bottom: 15px; } }

/* Medium devices */
@media (max-width: 768px) {
  .destination--activities {
    width: 70vw; } }

/* Medium devices */
@media (max-width: 640px) {
  .destination {
    width: 90vw;
    margin-right: 0;
    margin-left: 0; } }

/* Small devices */
@media (max-width: 480px) {
  .destination--activities {
    width: 85vw; }
  .destination__buy--item,
  .destination__todo--item {
    font-size: 1.6rem;
    width: 95%; }
  .destination__title {
    font-size: 4rem; }
  .destination {
    width: 85vw; } }

/* Small devices */
/*----------------------------------
ADVERTISEMENT
----------------------------------*/
.advertising {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 15px;
  position: relative; }

.advertising--horizontal {
  height: 100px; }

.advertising--square {
  border: none;
  background: none; }

.square {
  background: #ddd;
  margin-right: 30px;
  width: 300px;
  height: 250px; }

.square--center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

/* Large devices */
@media (max-width: 1200px) {
  .advertising--square {
    width: 70%; } }

/* Large devices */
@media (max-width: 1024px) {
  .advertising--square {
    width: 100%;
    margin: 0 auto;
    text-align: center; } }

/* Medium devices */
@media (max-width: 768px) {
  .square {
    display: block;
    margin: 0 auto;
    margin-bottom: 30px; } }

/* Medium devices */
/* Small devices */
/* Small devices */
/*----------------------------------
BUTTONS
----------------------------------*/
.button__group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 75%;
  margin-top: 15px;
  margin-bottom: 15px;
  margin: 0 auto;
  padding-left: 30px;
  border: 1px solid red; }

.button__controls {
  margin-top: 60px;
  margin-bottom: 60px; }

button {
  display: block;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 20px;
  padding-right: 60px;
  padding-left: 60px;
  cursor: pointer;
  text-align: left;
  border: none;
  background: #fff; }

.btn--previous,
.btn--next,
.btn--buy,
.btn--all,
.btn--recommend,
.btn--option {
  text-transform: uppercase;
  border-radius: 3px;
  font-family: "Roboto", sans-serif;
  font-size: 1.4rem;
  font-weight: 700; }

.btn--previous,
.btn--next {
  display: inline;
  margin-right: 30px;
  min-width: 225px;
  text-align: center; }

.btn--all,
.btn--recommend,
.btn--option {
  border: 1px solid #aaa; }

.btn--previous {
  color: #c62828;
  border: 1px solid #c62828; }
  .btn--previous .fa-long-arrow-left {
    color: #c62828; }

.btn--all,
.btn--recommend,
.btn--option {
  font-weight: 400;
  text-transform: none;
  color: #212121;
  display: inline-block;
  margin-right: 30px;
  min-width: 225px;
  min-height: 75px;
  border-bottom: 2px solid #aaa; }

.btn--all,
.btn--recommend {
  background: #c62828;
  border: none;
  color: #fff;
  font-weight: 700;
  text-align: center; }
  .btn--all:hover,
  .btn--recommend:hover {
    background: #900;
    border: none; }

.btn--option {
  text-align: left;
  padding-left: 30px;
  min-width: 260px;
  min-height: 75px;
  font-size: 1.6rem; }
  .btn--option.is-selected {
    border: 2px solid #c62828;
    color: #c62828; }
  .btn--option .fa-check {
    color: #c62828;
    float: right;
    position: relative;
    right: -40px;
    top: -1px; }
    .btn--option .fa-check.is-grey {
      color: #e7e7e7; }
    .btn--option .fa-check.is-red {
      color: #c62828; }

.btn--sidebar {
  font-weight: 400;
  text-transform: none;
  margin: 0;
  font-size: 1.6rem;
  padding-left: 15px;
  font-family: "Roboto";
  background: transparent;
  color: #212121;
  margin-top: 15px;
  padding-top: 5px;
  padding-bottom: 5px; }
  .btn--sidebar:hover {
    color: #aaa;
    color: #ccc; }

.btn--next,
.btn--buy {
  color: #fff;
  border: none;
  background: #c62828; }

.btn--buy {
  margin: 0;
  width: 100%;
  text-align: center;
  margin-top: 15px;
  text-decoration: none; }
  .btn--buy:visited {
    text-decoration: none; }

.btn--view {
  border: none;
  margin-bottom: 0; }
  .btn--view:hover {
    color: #212121; }

.btn--next {
  border-bottom: 2px solid #900; }
  .btn--next:hover {
    background: #900;
    transition: 0.2s; }

/* Custom query */
@media (max-width: 1250px) {
  .button__group {
    width: 80%; } }

/* Large devices */
@media (max-width: 1200px) {
  .button__group {
    width: 90%; } }

/* Large devices */
@media (max-width: 1024px) {
  .button__group {
    width: 100%; } }

/* Medium devices */
/* Medium devices */
/* Small devices */
@media (max-width: 480px) {
  .btn--option {
    min-width: 275px; }
  .btn--all,
  .btn--recommend {
    min-width: 275px; } }

/* Small devices */
/* Small devices */
/*----------------------------------
GIFT
----------------------------------*/
.gifts {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  width: 80vw;
  clear: both;
  margin-left: 45px; }

.gift {
  width: 500px;
  padding: 15px;
  border: 1px solid #aaa;
  border-radius: 3px;
  font-family: "Roboto";
  font-size: 1.8rem;
  width: 375px;
  margin-bottom: 30px;
  margin-right: 30px; }

.gift__image {
  background: #ddd;
  width: 100%;
  height: 300px; }

.gift__name,
.gift__price {
  font-weight: 700; }

.gift__name {
  margin-top: 15px;
  margin-bottom: 30px;
  font-family: "Merriweather";
  font-size: 4rem;
  line-height: 1;
  font-weight: 900; }

.gift__price {
  margin: 0;
  margin-right: 30px;
  font-size: 2rem;
  line-height: 1;
  font-family: "Open Sans";
  font-weight: 900; }

.gift__description {
  margin-bottom: 0;
  font-family: "Open Sans";
  font-size: 1.6rem;
  color: #212121; }

.gift__link {
  display: inline-block;
  text-decoration: none;
  border-bottom: 1px solid #212121; }

.gift__share {
  display: block;
  clear: both;
  padding: 15px;
  border: 1px solid #aaa; }

.gift__icons {
  text-align: center; }

.gift__link {
  margin-bottom: 30px;
  border-bottom: 2px solid #c62828; }
  .gift__link:visited {
    color: #c62828; }

/*----------------------------------
GUIDE
----------------------------------*/
.helper {
  height: 15vh; }
  .helper p {
    font-size: 2rem; }

.option {
  cursor: pointer;
  border-bottom: 1px dotted #212121;
  font-weight: 700; }

/*----------------------------------
ICONS
----------------------------------*/
i.fa-pinterest-p,
i.fa-amazon,
i.fa-twitter,
i.fa-facebook,
i.fa-check,
i.fa-long-arrow-left,
i.fa-times,
i.fa-map-marker,
i.fa-map,
i.fa-envelope,
i.fa-gift {
  margin-right: 5px;
  font-size: 2rem;
  cursor: pointer;
  color: #212121; }
  i.fa-pinterest-p:visited, i.fa-pinterest-p:focus, i.fa-pinterest-p:active,
  i.fa-amazon:visited,
  i.fa-amazon:focus,
  i.fa-amazon:active,
  i.fa-twitter:visited,
  i.fa-twitter:focus,
  i.fa-twitter:active,
  i.fa-facebook:visited,
  i.fa-facebook:focus,
  i.fa-facebook:active,
  i.fa-check:visited,
  i.fa-check:focus,
  i.fa-check:active,
  i.fa-long-arrow-left:visited,
  i.fa-long-arrow-left:focus,
  i.fa-long-arrow-left:active,
  i.fa-times:visited,
  i.fa-times:focus,
  i.fa-times:active,
  i.fa-map-marker:visited,
  i.fa-map-marker:focus,
  i.fa-map-marker:active,
  i.fa-map:visited,
  i.fa-map:focus,
  i.fa-map:active,
  i.fa-envelope:visited,
  i.fa-envelope:focus,
  i.fa-envelope:active,
  i.fa-gift:visited,
  i.fa-gift:focus,
  i.fa-gift:active {
    color: #212121; }
  i.fa-pinterest-p:hover,
  i.fa-amazon:hover,
  i.fa-twitter:hover,
  i.fa-facebook:hover,
  i.fa-check:hover,
  i.fa-long-arrow-left:hover,
  i.fa-times:hover,
  i.fa-map-marker:hover,
  i.fa-map:hover,
  i.fa-envelope:hover,
  i.fa-gift:hover {
    color: #c62828; }

i.fa-times,
i.fa-long-arrow-right,
i.fa-arrow-right {
  position: relative;
  top: 2px;
  margin-left: 8px;
  font-size: 2rem; }

i.fa-long-arrow-left {
  position: relative;
  top: 2px; }

i.fa-pinterest-p,
i.fa-facebook,
i.fa-twitter {
  margin-right: 30px; }

i.fa.fa-amazon {
  margin-right: 15px; }

i.fa-gift {
  margin-right: 8px;
  margin-top: 30px; }
  i.fa-gift:hover {
    color: #212121; }

i.fa-circle {
  color: #fff;
  margin-right: 5px;
  font-size: 8px;
  position: relative;
  top: -2px;
  display: none; }

i.fa-check {
  cursor: default; }

/*----------------------------------
LIST
----------------------------------*/
ul {
  padding: 0; }

ul li {
  display: inline-block;
  margin-right: 15px;
  text-align: center; }

.panel {
  width: 100%;
  height: 100%;
  position: relative; }

.panel__progress {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; }

.panel__circle {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  padding: 15px;
  border: 1px solid #aaa;
  border-radius: 50%;
  font-size: 1.6rem;
  font-weight: 300; }
  .panel__circle.is-selected {
    color: #fff;
    border: none;
    background: #c62828; }
  .panel__circle.is-completed {
    border: 1px solid #c62828; }
    .panel__circle.is-completed .fa-check {
      color: #c62828; }

.panel__text {
  font-family: "Roboto", sans-serif;
  font-size: 1.4rem; }

.panel__number {
  position: relative;
  top: -22px; }
  .panel__number.is-hidden {
    display: none; }

.panel__pick {
  padding: 15px;
  text-align: center; }

.panel__title {
  font-family: "Merriweather";
  font-weight: 900;
  text-transform: none;
  margin-top: 30px;
  font-size: 4rem; }

.panel__instructions {
  text-align: center;
  font-weight: 400;
  font-family: "Open Sans";
  font-size: 1.8rem;
  color: #aaa;
  margin: 0;
  margin-top: 15px;
  margin-bottom: 30px; }

/* Large devices */
/* Large devices */
/* Medium devices */
/* Medium devices */
@media (max-width: 640px) {
  .panel__circle,
  .panel__text {
    display: none; }
  .panel__title {
    font-size: 3rem;
    width: 80%;
    margin: 0 auto; } }

/* Small devices */
/* Small devices */
/*----------------------------------
MAP
----------------------------------*/
.map {
  background: #ddd;
  width: 100%;
  height: 600px;
  max-width: 800px;
  max-height: 600px; }

/* Large devices */
/* Large devices */
/* Medium devices */
/* Medium devices */
/* Small devices */
@media (max-width: 480px) {
  .map {
    height: 400px; } }

/* Small devices */

<header>
<div class="header__overlay destination__overlay"></div>
    <div class="header__info">
        <h2 class="header__year">2016 Edition</h2>
        <h1 class="header__intro">The List</h1>
        <h3 class="header__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, reiciendis voluptate impedit, dolor tempora ratione debitis repudiandae laborum consectetur aperiam. Ad magnam facere quam optio cumque nihil vero perferendis dolores.</h3>

        <div class="header__buttons">
            <button class="btn btn--all">See all 200+ gifts</button>
            <button class="btn btn--recommend">Get a recommendation</button>
            <!-- <button class="btn btn--recommend">Explore a destination</button> -->
        </div>
    </div>
    <p class="header__credit">Photo by tk-name</p>
</header>

index.html

<header>
<div class="header__overlay destination__overlay"></div>
    <div class="header__info">
        <h2 class="header__year">2016 Edition</h2>
        <h1 class="header__intro">The List</h1>
        <h3 class="header__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, reiciendis voluptate impedit, dolor tempora ratione debitis repudiandae laborum consectetur aperiam. Ad magnam facere quam optio cumque nihil vero perferendis dolores.</h3>

        <div class="header__buttons">
            <button class="btn btn--all">See all 200+ gifts</button>
            <button class="btn btn--recommend">Get a recommendation</button>
            <!-- <button class="btn btn--recommend">Explore a destination</button> -->
        </div>
    </div>
    <p class="header__credit">Photo by tk-name</p>
</header>

header.scss

/*----------------------------------
HEADER
----------------------------------*/

header {
    width: 100vw;
    height: 100%;
    min-height: 100vh;
    position: relative;
    background-image: url("/src/img/snowglobe1.jpg");
    background-size: cover;
    background-position: center;
    position: relative;
}

.header__info {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.header__credit {
    font-weight: 400;
    margin: 0;
    position: absolute;
    bottom: 0;
    right: 0;
    color: $color-white;
    padding: 30px;
    padding-right: 45px;
}

.header__year {
    color: $color-white;
    font-weight: 700;
    font-size: 1.6rem;
    text-align: center;
    margin: 0;
    text-transform: uppercase;
    /* display: inline-block; */
    width: 120px;
    margin: 0 auto;
    padding-bottom: 2px;
    border-bottom: 4px solid #c62828;
}

.header__intro {
    color: $color-white;
}

.header__description {
    text-align: center;
    color: $color-grey-dark;
    color: $color-black;
    color: $color-white;
    font-size: 1.8rem;
    line-height: 1.5;
    font-weight: 400;
    // width: 70%;
    width: 60%;
    margin: 0 auto;
}

.header__buttons {
    text-align: center;
    margin-top: 45px;
}

/* Large devices */
@media (max-width: 1200px) {
    .header__info {
        width: 60%;
    }
}

/* Large devices */
@media (max-width: 1024px) {
    .header__info {
        width: 75%;
    }
}

/* Medium devices */
@media (max-width: 800px) {
    .header__info {
        width: 80%;
    }
}

/* Medium devices */
@media (max-width: 768px) {
    .header__intro {
        line-height: 1.1;
        margin-top: 30px;
        margin-bottom: 45px;
    }
}

/* Custom query */
@media (max-width: 700px) {
    .header__buttons {
        margin-left: 25px;
    }
}

/* Medium devices */
@media (max-width: 640px) {
    .header__intro {
        font-size: 14rem;
    }

    .header__description {
        font-size: 1.6rem;
        width: 90%;
    }

    .header__credit {
        display: none;
    }
}

/* Small devices */
@media (max-width: 480px) {
    .header__buttons {
        margin-left: 0;
        position: relative;
        left: 3%;
    }

    .header__description {
        width: 100%;
    }
}

/* Small devices */
@media (max-width: 360px) {
    .header__buttons {
        position: relative;
        left: -2%;
    }
}

/* Small devices */
@media (max-width: 340px) {
    .header__buttons {
        position: relative;
        left: -4%;
    }
}

/* Small devices */
@media (max-width: 320px) {
    .header__buttons {
        position: relative;
        left: -6%;
    }
}

Answer 1

您可以给父容器“position:relative”，然后给子容器“position:absolute”，那么它将始终保留在容器中。 :)