如何让两个div彼此相邻并仍然有侧边栏？

Question

我试图让一个内容div中的2个div并排（左和右，见下面的示例），同时仍然有一个不同的侧边栏模具。我尝试过使用花车，但是没有将正确的div对齐到正确的高度。我也尝试过使用新的CSS网格布局方法，但是当我将其添加到我的代码时没有任何变化，所以我删除了它。

＆＃13;

＆＃13;

.main-content {
  border-style: solid;
  color: #DC143C;
  width: 75%;
}

.main-content-left-side {   
  color: #DC143C;
}

.main-content-right-side {
  color: #DC143C;
  height: 300px;
}

.sidecontent {
  width: 300;
  color: #DC143C;
  border-style: solid;
  border-left: 100px;  
}

h1 {
  text-align: center;
}

h2.previousvid {
  text-align: left;
  font-size: 20px; 
}

p {
  padding-left: 10px;
}

hr {
  border-top: 1px solid #DC143C;
  border-bottom: 1px solid #DC143C;
}

ol {
  display: block;
  list-style-type: decimal;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 600px;
}

＆＃13;

<header> 
  <ul class="left";> 
    <li class="nav";><a class="a a-nav-top leftbuttons";          
    href="#">Home</a></li>
    <li class="nav";><a class="a a-nav-top leftbuttons";           
    href="#">Shop</a></li>
    <li class="nav";><a class="logobutton";   
    href="https://www.youtube.com/channel/UCmZOe6sv3wuq97Vo-9Rdyyw";  
    target="_blank";>RG</a></li>
    <li class="nav";><a class="a a-nav-top rightbuttons";    
    href="#">Archives</a></li>
    <li class="nav";><a class="a a-nav-top rightbuttons"; 
    href="#">Suggestions</a></li>
  </ul>
</header>

<div class="main-content">
  <h1>Home</h1>
  <p>Hello welcome to my site you guys know me already Recht A.K.A Domo.                                                        Here you can find my video upload schedule, previous video, current video, and you can make suggestions on what games I play.</p>
  <hr>
  <div class="main-content-left-side";>
    <h2>Previous Video (As of Jun-29-16):</h2>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/bDXMLKNPUGw" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="main-content-right-side"> 
    <ol>
      <li id="schedule";>Mondays: Upload</li>
      <li id="schedule";>Tuesday: Upload</li>
      <li id="schedule";>Wendsday: Upload</li>
      <li id="schedule";>Thurday: Break</li>
      <li id="schedule";>Friday: Upload</li>
      <li id="schedule";>Saturday: Production</li>
      <li id="schedule";>Sunday: Production</li>
    </ol>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我希望如何：

Answer 1

尝试使用flex。将左右div放在div dispaly:flex中，然后将padding-left移至ol

.main-content {
  border-style: solid;
  color: #DC143C;
  width: 75%;
}

.main-content-left-side {   
  color: #DC143C;
}

.main-content-right-side {
  color: #DC143C;
  height: 300px;
}

.sidecontent {
  width: 300;
  color: #DC143C;
  border-style: solid;
  border-left: 100px;  
}

h1 {
  text-align: center;
}

h2.previousvid {
  text-align: left;
  font-size: 20px; 
}

p {
  padding-left: 10px;
}

.main-container {
  display: flex;
}

hr {
  border-top: 1px solid #DC143C;
  border-bottom: 1px solid #DC143C;
}

ol {
  display: block;
  list-style-type: decimal;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

<header> 
  <ul class="left";> 
    <li class="nav";><a class="a a-nav-top leftbuttons";          
    href="#">Home</a></li>
    <li class="nav";><a class="a a-nav-top leftbuttons";           
    href="#">Shop</a></li>
    <li class="nav";><a class="logobutton";   
    href="https://www.youtube.com/channel/UCmZOe6sv3wuq97Vo-9Rdyyw";  
    target="_blank";>RG</a></li>
    <li class="nav";><a class="a a-nav-top rightbuttons";    
    href="#">Archives</a></li>
    <li class="nav";><a class="a a-nav-top rightbuttons"; 
    href="#">Suggestions</a></li>
  </ul>
</header>

<div class="main-content">
  <h1>Home</h1>
  <p>Hello welcome to my site you guys know me already Recht A.K.A Domo.                                                        Here you can find my video upload schedule, previous video, current video, and you can make suggestions on what games I play.</p>
  <hr>
  <div class="main-container">
  <div class="main-content-left-side";>
    <h2>Previous Video (As of Jun-29-16):</h2>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/bDXMLKNPUGw" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="main-content-right-side"> 
    <ol>
      <li id="schedule";>Mondays: Upload</li>
      <li id="schedule";>Tuesday: Upload</li>
      <li id="schedule";>Wendsday: Upload</li>
      <li id="schedule";>Thurday: Break</li>
      <li id="schedule";>Friday: Upload</li>
      <li id="schedule";>Saturday: Production</li>
      <li id="schedule";>Sunday: Production</li>
    </ol>
  </div>
  </div>
</div>