为什么右边距不起作用？ CSS网格

Question

我使用css网格，并且我希望内容类的每一边都有15px的边距，但是右边的边距不起作用。我究竟做错了什么？我希望.content的宽度为100％，并且每边都有边距。

@import 'variables.scss';

@mixin mobile-min {
  @media (min-width: #{$screen-mobile-min}) {
    @content;
  }
}

@mixin mobile-max {
  @media (max-width: #{$screen-mobile-max}) {
    @content;
  }
}

@mixin tablet-min {
  @media (min-width: #{$screen-tablet-min}) {
    @content;
  }
}

@mixin desktop-min {
  @media (min-width: #{$screen-desktop-min}) {
    @content;
  }
}

::placeholder {
  color: $placeholder-color;
}

html {
  font-family: $font;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
}

.header {
  grid-area: header;
}

.content {
  grid-area: content;
  margin: 15px;
}

.footer {
  grid-area: footer;
  @include mobile-max {
    display: none;
  }
}

.container {
    // mobile devices
  @include mobile-min {
    width: 100vw;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-areas: 
    "header"
    "content"
  }
  //tablet devices
  @include tablet-min {
    margin: 0;
    padding: 0;
    min-width: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-areas: 
    "header header header"
    ". content ."
    "footer footer footer"
  }
  //desktop devices
  @include desktop-min {
    margin: 0;
    padding: 0;
    min-width: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-areas: 
    "header header header"
    ". content ."
    "footer footer footer"
  }

.primary-button {
    background-color: $primary-color;
    border-color: $primary-color;
    color: #FFFFFF;
    border: 1px;    
    border-radius: 20px;
    margin: 0 15px 0 15px;
    min-height: 48px;
    min-width: 100%;    
  }

  .form-group {
    display: block;
    margin: 15px;
  }

  .basic-input {
    box-sizing: border-box;
    border: 1.5px solid $border-color;
    min-height: 50px;
    margin: 15px;
    padding: 15px;
    color: $primary-color;
  }

  .basic-input.ng-invald.ng-touched {
    border-color: $validator-color;
  }

  .text-center {
    text-align: center;
  }
}

<div class="container">
  <div class="header">
    <app-header></app-header>
  </div>
  <div class="content">
    <router-outlet></router-outlet>
  </div>
  <div class="footer">Footer</div>
</div>

  <div class="form-group">
    <input type="email" class="basic-input" placeholder="[email protected]" formControlName="email">
    <input type="password" class="basic-input" placeholder="Enter password here" formControlName="password">
  </div> 

我将。container中的宽度更改为100vw，现在可以使用。这是好方法吗？

Answer 1

内容的边距为15px，您使用100％宽度或100vw