Как исправить код, чтобы текст переместился в право?

Question

[Ivan_Worker]

Есть код, который был сделан, но один <div> не может сдвинуться в право. Помогите.

<div class="nazvaniye">
	Опорные материалы по Общество знанию
</div>
<div class="ssilki_na_disk1">
	<div class="text_na_disk">
	<a>Синквейн</a>
	</div>
</div>

<div class="ssilki_na_disk2">
	<div class="text_na_disk2">
	<a>Внеклассное чтение по обществознанию</a>
	</div>
</div>

body{
  background-color:#FFE7A0;

}

.text_na_disk2{
  margin:20px;

}

.ssilki_na_disk2{
  border:5px solid black;
  font-size:25px;
  margin:20px;
  background-color:#F3F3F3;
  height:70px;
  width:500px;
}

.text_na_disk{
  margin:20px;

}

.ssilki_na_disk1{
  border:5px solid black;
  font-size:25px;
  margin:20px;
  background-color:#F3F3F3;
  height:70px;
  width:150px;
}

.nazvaniye{
  border:5px solid black;
  font-size: 45px;
  text-align:center;
  margin:25px;
  border-radius:20px;
  background-color:#F3F3F3;
}

.nov_god{
  height:50px;
  width:1670px;
  background-color:#361607;
}

      nav ul {
          padding:0;
          margin:0;
          list-style: none;
          }

      nav ul li {
          margin: 0px -7px 0 0;
          display:inline-block;
          }
      
      nav a {
          display:block;
          color:#28D0FF;
          font-size:20px;
          margin-left: 35px;
      }
      
      nav a:hover {
        color:#05A4B4;    
      }
a{
  cursor:pointer;
  color:black;
}

a:hover{
  color:#383838;
}

Comments

[Ivan_Worker]

MaintstDev, Всё, что в голову лезло то и писал, как класс)))

Answer 1

[PinocioCORP]

Есть три способа.
1. Оборачиваешь оба элемента в один DiV с классом .wrapper и врапперу даешь display: flex
2. Оборачиваешь оба элемента в один div c классом .wrapper и даешь этим двум элементами display: inline-blcok
3. Так же оборачиваешь два элемента и одному даешь float: left второму float:right

Я бы воспользовался бы 2 вариантом в твоем случае.

.wrapper>div{
	display: inline-block;
}

<div class="wrapper">
	<div class="ssilki_na_disk1">
	  <div class="text_na_disk">
	  <a>Синквейн</a>
	  </div>
	</div>
	<div class="ssilki_na_disk2">
	  <div class="text_na_disk2">
	  <a>Внеклассное чтение по обществознанию</a>
	  </div>
	</div>
</div>

Comments

[Ivan_Worker]

3 вариант