为什么我的HTML部分没有并排排列？_Html_Css

为什么我的HTML部分没有并排排列？

html css

为什么我的HTML部分没有并排排列？,html,css,Html,Css,我一直在尝试将我根据此视频构建的网站的两个部分对齐：这就是我这边的网站目前的样子：蓝色部分很好，但是，带有“UX/UI设计”、“数字营销”、“Web开发”和“内容编写”的卡片未与“经验丰富的UX/UI设计师”部分对齐这就是我的HTML当前的样子，两个部分都用一个“landing”类包装起来该部分似乎位于“平台”之外，尽管它显示它被包裹在同一部分中。在阅读本教程时，我似乎没有看到迄今为止我错过的任何东西如果对此有任何解释，请让我知道，因为所有的帮助将不胜感激在css页面中添加这一行

我一直在尝试将我根据此视频构建的网站的两个部分对齐：

这就是我这边的网站目前的样子：

蓝色部分很好，但是，带有“UX/UI设计”、“数字营销”、“Web开发”和“内容编写”的卡片未与“经验丰富的UX/UI设计师”部分对齐

这就是我的HTML当前的样子，两个部分都用一个“landing”类包装起来

该部分似乎位于“平台”之外，尽管它显示它被包裹在同一部分中。在阅读本教程时，我似乎没有看到迄今为止我错过的任何东西

如果对此有任何解释，请让我知道，因为所有的帮助将不胜感激

在css页面中添加这一行：

.landing{display:flex；flex direction:row；}

此外，由于我所看到的教程并不太关心交叉浏览器的兼容性，您可能希望通过一些类似这样的网站使用css：

https://autoprefixer.github.io/

这似乎奏效了，谢谢！我刚刚注意到的另一个问题是它没有响应：/I我可以简单地添加引导，不会有任何问题？只需遵循引导布局（容器、col等），它应该可以正常工作。如果没有，请告诉我们（请先尝试）。

  <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
      <title>Jono Mackay</title>
      <link rel="stylesheet" href="main.css">
    </head>
      <body>
        <div class="detail-lines">
          <div class="left-line-1"></div>
          <div class="left-line-2"></div>
          <div class="left-line-3"></div>
          <div class="center-line"></div>
          <div class="right-line-1"></div>
          <div class="right-line-2"></div>
          <div class="right-line-3"></div>
        </div>

          <nav>
              <a href="#" class="logo"><div class="rec"></div>Jono Mackay</a>
              <div class="nav-right">
                <a href="#">Contact Me</a>
                <a href="#">Work<img src="images/icon-work.png" alt="work icon"></a>
              </div>
          </nav>

        <div class="wrapper-content">
              <div class="landing">
                <div class="left">
                    <div class="line"></div>
                    <h1>Exprienced UX/UI<br>Designer</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore perferendis porro assumenda repellendus laboriosam!<br><br>Adipisci repellat eligendi reprehenderit maiores ab, asperiores reiciendis quo accusamus.</p>
                    <div class="rec-large"></div>
                </div>
                <div class="right">
                    <div class="skills">
                      <div class="skill-box">
                        <h2>UX/UI Design</h2>
                      </div>
                      <div class="skill-box">
                        <h2>Digital Marketing</h2>
                      </div>
                      <div class="skill-box">
                        <h2>Web Development</h2>
                      </div>
                      <div class="skill-box">
                        <h2>Content Writing</h2>
                      </div>
                    </div>
                </div>
              </div>
              <div class="section2">
                <div class="left r">
                  <img class="arrow" src="images/icon-arrow.png" alt="arrow icon">
                  <h1 class="white">LET'S START A <br>PROJECT</h1>
                  <div class="rec-large-2"></div>
                </div>
                <div class="right l">
                  <div class="line2"></div>
                  <h1>DESIGN &amp;<br>DEVELOPMENT</h1>
                </div>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore perferendis porro assumenda repellendus laboriosam!<br><br>Adipisci repellat eligendi reprehenderit maiores ab, asperiores reiciendis quo accusamus.</p>
              </div>
        </div>
        <footer>
          <div class="social">
            <a href="#">Youtube</a>
            <a href="#">Instagram</a>
            <a href="#">Twitter</a>
          </div>
          <p>2019&copy; Jono Mackay</p>
        </footer>
      </body>
  </html>

/*
 * ─── GLOBAL ─────────────────────────────────────────────────────────────────────
 */

* {
  margin: 0;
  border: 0;
  padding: 0;
  font-size: 100%;
  outline: 0;
  vertical-align: baseline;
}

:root {
  --main-black: #1f202b;
  --main-gray: #8a8ca5;
  --light-gray: #e7e7e8;
  --main-blue: #5952ff;
}

html {
  font-family: Poppins, sans-serif;
}

html, body {
  width: 100%;
  height: 100%;
}

h1 {
  font-size: 50px;
  font-weight: 900;
  color: var(--main-black);
}

h2 {
  font-size: 30px;
  font-weight: 500;
  color: var(--main-black);
}

p {
  font-size: 17px;
  color: var(--main-gray);
}
a {
  font-size: 17px;
  color: var(--main-gray);
  text-decoration: none;
}

.wrapper-content {
  width: 70%;
  margin: 0 auto;
}

.white {
  color: white;
}

.r {
  text-align: right;
  margin-right: 300px;
  margin-bottom: 530px;
}

.l {
  padding-left: 200px;
}

/*
 * ─── NAV ────────────────────────────────────────────────────────────────────────
 */

nav {
  position: fixed;
  top: 50px;
  left: 5%;
  line-height: 50px;
  width: 100%;
}

nav a {
  font-weight: 500;
  color: var(--main-black);
}

.nav-right {
  position: fixed;
  right: 5%;
  top: 50px;
}

.nav-right a > img {
  vertical-align: text-bottom;
}


.nav-right a:first-child {
  color: var(--main-blue);
  margin-right: 60px;
}

.rec {
  background-color: var(--main-blue);
  display: inline-block;
  width: 7px;
  height: 14px;
  margin-right: 3px;
}


/*
 * ─── CONTENT ────────────────────────────────────────────────────────────────────
 */


.landing .section2 {
  margin-top: 250px;
  display: flex;
}

.left {
  flex: 1;
  margin-top: 130px;
  position: relative;
}

.right {
  flex: 1;
  position: relative;
}

.right p {
  max-width: 500px;
}

.left p {
  max-width: 500px;
}

.skills {
  float: right;
}


.skill-box {
  background-color: white;
  margin: 30px 0;
  text-align: center;
  width: 390px;
  height: 120px;
  line-height: 120px;
  -webkit-box-shadow: 0px 5px 20px 0px rgba(75,79,124,0.1);
  -moz-box-shadow: 0px 5px 20px 0px rgba(75,79,124,0.1);
  box-shadow: 0px 5px 20px 0px rgba(75,79,124,0.1);
}


.rec-large {
  background-color: var(--main-blue);
  height: 150px;
  width: 620px;
  position: absolute;
  top: -33px;
  left: -80px;
  z-index: -1;
}

.line {
  height: 3px;
  width: 120px;
  background-color: var(--main-black);
  position: absolute;
  top: 30px;
  left: -140px;
}


.line2 {
  height: 3px;
  width: 120px;
  background-color: var(--main-black);
  position: absolute;
  top: 30px;
  left: 60px;
}

.section2 {
  margin-top: 700px;
}

.rec-large-2 {
  background-color: var(--main-blue);
  height: 260px;
  width: 1000px;
  position: absolute;
  top: -147px;
  left: -472px;
  z-index: -1;
}


.arrow {
  position: absolute;
  right: 5px;
  top: -100px;
}