保证金不当

Question

我正在完成一个新项目，运行遇到了这个问题。在左侧，space 比右侧多。我尝试了很多解决方案，但 none 有效。

这是我的 CSS 正文和主要代码：

body {
  font-family: $font;
  font-size: 15px;
  background: url(/images/bg-pattern-top-desktop.svg),
    url(/images/bg-pattern-bottom-desktop.svg);
  background-position: top left, top right;
  background-repeat: no-repeat;
  overflow-x: hidden;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 70px;
}
main {
  height: 70%;
}

还提供了整个代码的link： https://codepen.io/kyrylolvov-the-looper/pen/rNMYOwE

Answer 1

在 .second-row 上添加 align-items:flex-end;，这将正确显示:)

.second-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    align-items: flex-end; // Add this line of code
}

代码笔工作 LINK: https://codepen.io/emmeiWhite/pen/jOMabaQ

保证金不当

Improper margin

html

css

margin

flexbox