在 html 中填充文章元素

.project-elem {
  background-color: greenyellow;
  padding-top: 5rem;
  padding-bottom: 5rem;
  height: 300px;
}

.projects {
  margin: 0;
  padding: .7rem;
  background-color: #DDCDE8;
  font: Asap, sans-serif;
  height: 1000px;
}

.project-n {
  background-color: green;
  text-align: center;
  width: 60%;
  float: left;
  padding: 2.5rem;
}

.img {
  background-color: blue;
  text-align: center;
  padding: 3rem;
  margin-left: 40%;
}

<div class="projects" id=#projects>
  <h2>My Projects</h2>
  <article class="project-elem">
    <div class="project-n" id="dictocounter">
      <h3>Dictation Counter</h3>
      <p>info about proj</p>
      <img src="dictocounter1.jpg" alt="Dictocounter in Action">
    </div>
    <div class="img">
      <p>heres SOME IMAGE</p>
    </div>
  </article>
  <article class="project-elem">
    <div class="project-n" id="calc">
      <h3>RPN Calculator</h3>
      <p>info about proj</p>
      <img src="calc.jpg" alt="RPN Calculator Decoding Input">
    </div>
    <div class="img">
      <p>heres SOME IMAGE</p>
    </div>
  </article>
  <article class="project-elem">
    <div class="project-n" id="markov">
      <h3>Markov Chain Text Generation</h3>
      <p>info about proj</p>
      <img src="calc.jpg" alt="Markov Chain Text Generation">
    </div>
    <div class="img">
      <p>heres SOME IMAGE</p>
    </div>
  </article>
  <article class="project-elem">
    <div class="project-n" id="audio">
      <h3>Song Similarities</h3>
      <p>info about proj</p>
      <img src="calc.jpg" alt="Audio Spectral Analysis">
    </div>
    <div class="img">
      <p>heres SOME IMAGE</p>
    </div>
  </article>
  <article class="project-elem">
    <div class="project-n" id="tree">
      <h3>DFS/BFS Search Tree</h3>
      <p>info about proj</p>
      <img src="calc.jpg" alt="Simple Trees">
    </div>
    <div class="img">
      <p>heres SOME IMAGE</p>
    </div>
  </article>
</div>