В этом коде html+css я хочу, чтобы <p>, <ol> и <p1> в <section class=one> находились в разных строках, но все это в одно ⇐ CSS

[Anonymous]

В разделе class="container" в html я создал множество разделов, таких как первый, второй, третий и четвертый. Я добавил текст, список и еще немного текста в первый раздел. Но кажется, что все находится в одной линии, а не находится друг под другом. Что мне сделать, чтобы ,

• и
  отображались друг под другом?
  Пожалуйста, проверьте рисунок ниже, тексты расположены в одну строку... Я хочу, чтобы они находились друг под другом.
  CSS (проверьте после строки 64, она должна начинаться с контейнера{})
  *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  }
  .banner{
  background-color: deepskyblue;
  }
  .navbar{
  width: 85%;
  margin: auto;
  padding: 35px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  }
  .logo{
  width: 475px;
  cursor: pointer;
  }
  .navbar ul li{
  list-style: none;
  display: inline-block;
  margin: 0 20px;
  position: relative;
  }
  .navbar ul li a{
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
  }
  .navbar ul li::after{
  content: '';
  height: 3px;
  width: 0;
  background: #e5b3f1;
  position: absolute;
  left: 0;
  bottom: -10;
  transition: 0.5s;
  }
  .navbar ul li:hover:after{
  width: 100%;
  }
  .content{
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  color: #fff;
  }
  .content h1{
  font-size: 60px;
  margin-top: -100px;
  }
  .content p{
  margin: 20px auto;
  font-weight: 100;
  line-height: 25px;
  font-size: 25px;
  }
  
  .container{
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
  }
  
  section{
  height: 100vh;
  display: flex;
  align-items: top;
  justify-content: center;
  scroll-snap-align: start;
  }
  h1{
  color: rgb(226,226,226);
  text-shadow: 1px 1px 4px #000;
  text-align: center;
  }
  .one{
  background-color: rgb(36,164,138);
  }
  p{
  font-size: 25px;
  text-align: left;
  }
  content ol{
  list-style-type: square;
  text-align: left;
  }
  p1{
  margin: 20px auto;
  font-weight: 100;
  line-height: 25px;
  font-size: 25px;
  text-align: left;
  }
  
  .two{
  background-color: rgb(211,79,79);
  }
  
  .three{
  background-color: rgb(67,91,175);
  }
  
  .four{
  background-color: rgb(191,64,191);
  }
  
  HTML (думаю, проблема в в теге body),
  HTML CODE,
  
  
  
  Digital Revolution
• 
  
  
  
  
  
  • Meaning
  • Home
  • Modern tech
  • Famous People
  • Future
  
  
  
  Before Digital Revolution
  Mechanical devices were used in the early ages because there weren't many digital inventions. Back then, people used to:
• Tell the time using mechanical clocks(which could be delayed.
• Use typewriters to write stuff which used alot of ink.
• Use low quality phones that cannot be used from really far away to communicate.
• ETC...

This age was between 1950 and 1970.


The Beginning


third page


fourth page






Подробнее здесь: https://stackoverflow.com/questions/787 ... s-one-to-b