Элементы не выровнены должным образом при попытке достичь простого CSS макета

Question

Я хочу добиться этого макета на моем веб-сайте (игнорируйте текст под изображением):

Я пытался добиться этого с помощью этого css и эта html разметка:

header {
  margin: 1%;
  background-color: darkgrey;
  width: 97%;
  height: 25%;
}

section {
  vertical-align: top;
  display: inline-block;
  width: 60%;
  height: 50%;
  margin: 1%;
  background-color: yellow;
}

aside {
  vertical-align: top;
  display: inline-block;
  width: 35%;
  height: 50%;
  margin: 1%;
  background-color: burlywood;
}

footer {
  margin: 1%;
  background-color: beige;
  width: 95%;
  height: 20%;
}

<header>
  <h1>Home</h1>
  <nav>
    <a href="./now.html">Now</a>
    <a href="./history.html">History</a>
    <a href="./future.html">Future</a>
  </nav>
</header>

<section>
  <article>
    <h4>article1</h4>
  </article>

  <article>
    <h4>article2</h4>
  </article>
</section>

<aside>
  <h4>aside</h4>
</aside>

<footer>
  <h4>footer</h4>
</footer>

Результат таков:

Вы можете видеть, что в стороне и элемент заголовка точно не выровнены. Это потому, что я использую встроенный блок, я думаю, и в файле html есть пробелы. Может быть, есть гораздо более простой способ получить макет, который я хочу?

Answer 1

Оберните section и aside в тег main и используйте flex, чтобы получить макет

header {
  margin: 1%;
  background-color: darkgrey;
  width: 97%;
  height: 25%;
}

main {
  display: flex;
}

section {
  vertical-align: top;
  display: inline-block;
  width: 60%;
  margin: 1%;
  background-color: yellow;
}

aside {
  vertical-align: top;
  display: inline-block;
  width: 35%;
  margin: 1%;
  background-color: burlywood;
}

footer {
  margin: 1%;
  background-color: beige;
  width: 95%;
  height: 20%;
}

<header>
  <h1>Home</h1>
  <nav>
    <a href="./now.html">Now</a>
    <a href="./history.html">History</a>
    <a href="./future.html">Future</a>
  </nav>
</header>

<main>
  <section>
    <article>
      <h4>article1</h4>
    </article>

    <article>
      <h4>article2</h4>
    </article>
  </section>

  <aside>
    <h4>aside</h4>
  </aside>
</main>

<footer>
  <h4>footer</h4>
</footer>

Answer 2

Попробуйте использовать макет сетки или flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/ быстро поигрались, пожалуйста, обратитесь к flexbox, если он соответствует вашим целям, обратите внимание, что нижний колонтитул липкий и статьи меняются в зависимости от униформы контента, кроме .

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background: blue; //just to show the container
}

header {
  margin: 1%;
  background-color: darkgrey;
  width: 97%;
  height: 25%;
}

section {
  justify-content: flex-start;
  align-items: stretch;
  vertical-align: top;
  display: inline-block;
  width: 60%;
  height: 50%;
  margin: 1%;
  background-color: yellow;
}

aside {
  justify-content: flex-start;
  align-items: stretch;
  vertical-align: top;
  display: inline-block;
  width: 35%;
  margin: 1%;
  background-color: burlywood;
}

footer {
  position: absolute;
  bottom: 0;
  line-height: 60px; /* Vertically center the text there */
  margin: 1%;
  background-color: beige;
  width: 95%;
  height: 20%;
}

<header>
  <h1>Home</h1>
  <nav>
    <a href="./now.html">Now</a>
    <a href="./history.html">History</a>
    <a href="./future.html">Future</a>
  </nav>
</header>
<main class="container">
<section>
  <article>
    <h4>article1</h4>
  </article>

  <article>
    <h4>article2</h4>
    <p>Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.<p/>
  </article>
</section>

<aside>
  <h4>aside</h4>
</aside>
</main>

<footer>
  <h4>footer</h4>
</footer>