Html 语义用户界面不组织网格

我正在做一个基于语义UI的项目，并使用它的网格系统。使用网格的代码的第一部分工作正常：

<div className='ui grid fluid container'>
  <div className='stackable six wide column' id='logo'>
    <img src='/images/home/icone-logo.svg' />
  </div>
  <div className='twelve wide mobile nine wide tablet nine wide computer column' id='nome'>
    <img src='/images/home/nome-logo.svg' />
    <br />
    <br />
    <span id='slogan'>Um sistema de estudo feito para você</span>
  </div>
</div>

这是一个非常复杂的系统

在第二部分中，元素加载ui和网格样式，但不加载应该组织它的列样式

<div className='ui grid fluid container'>
  <div className='four wide cloumn'>
    <img src="/images/home/ALUNO.svg" />
  </div>
  <div className="four wide cloumn">
    <img src="/images/home/prof.svg" />
    <div className="solucao-content">
      <p>Lorem ipsom</p>
    </div>
  </div>
  <div className="four wide column">
    <img src="/images/home/pais.svg" />
    <div className="solucao-content">
      <p>Lorem ipsom</p>
    </div>
  </div>
  <div className="four wide column">
    <img src="/images/home/escola.svg" />
    <div className="solucao-content">
      <p>Lorem ipsom</p>
    </div>
  </div>
</div>

洛雷姆·伊普索姆

洛雷姆·伊普索姆

洛雷姆·伊普索姆

第一部分就在body标签下面，第二部分在另一个div下面

即使当我尝试在第二个代码的位置加载相同的第一个代码时，它也无法正确渲染