Javascript 如何在同一行视频旁边获取我的推特提要

我正试图让我的实时推特订阅源就在我的youtube视频旁边，我希望他们在同一条线上，但不知道要实现什么代码，这样才能工作

另外，我想使用另一种字体系列来代替我在代码中使用的字体系列，在哪里可以找到它们，如何在代码中实现它们

下面我已经为我的网页提供了html、css和js，如果你能修复错误，谢谢

HTML: JS:

---

至于将视频和twitter提要放在同一行，请将css切换到以下位置：

#page {
    margin: auto;
    max-width: 85%; 
    font-family: 'Arya', sans-serif;
    color: white;
    padding-top: 50px;
}

#navbar {
    position: fixed; 
    top: 0;  
    width: 100%;
    margin-left: 11%;
    opacity: 0.8;
    max-width: 85%;

}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: white;
    position: fixed;
}
li {
    float: left;
    border-right: 2px solid black;
}

li:first-child {
    border-left: 2px solid black;
}
li a {
    display: inline-block;
    color: black;
    text-align: justify;
    padding: 36px 40px; 
    text-decoration: underline; 
    font-family: 'Raleway', sans-serif;
}
li a:hover {
    background-color: #5c5c5c;
    color: white; 
}

div.yt {
  margin-left: 0px;
  margin-top: 0px;
  display:inline-block;
} 

#twitter {
  display:inline-block;
}

.contentbox {
    font-family: 'Arya', sans-serif;
    font-weight: 700;
    font-size: 2em;
    padding-left: 10px;
    padding-bottom: 0;
    margin-bottom: 0;
    background-color:  grey;
}
.content {
    background-color: grey;
}
p {
    text-indent: 3%; 
    margin: auto;
    max-width: 95%;
}
h3 {
    margin-left: 5px;
    max-width: 95%;
}

---

重要的部分是youtube div和twitter div现在都使用“display:inline block”样式。您可能还希望调整推特提要的高度，以匹配youtube视频的高度。要在页面中添加不同的字体，我建议使用。选择一种您喜欢的字体，将其添加到您的收藏中，单击右下角的“使用”，然后复制代码。

我将css更改为您告诉我的样式，效果很好，但当我尝试更改推特提要的高度和宽度时，宽度在某一点停止变大。下面是我用来调整大小的代码。“data widget id=“674678491141570560”>Tweets by@applenws您不能更改链接标记中的宽度。您应该在已有的twitter css样式中更改它。只需在那里添加您想要的任何宽度。例如#twitter{display:inline block；宽度：600px；}如果解决了您的问题，请将此答案标记为正确。感谢您正确设置我的问题的格式，您是否能够帮助我解决我的问题？现在，我的页面的问题是，即使twitter提要和youtube视频位于同一行，我也无法更改twitter提要的宽度，即使我尝试使用css.我还想知道如何在视频和推特订阅源之间留出一些间隔，2或3厘米就足够了。

#page {
    margin: auto;
    max-width: 85%; 
    font-family: 'Arya', sans-serif;
    color: white;
    padding-top: 50px;
}

#navbar {
    position: fixed; 
    top: 0;  
    width: 100%;
    margin-left: 11%;
    opacity: 0.8;
    max-width: 85%;

}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: white;
    position: fixed;
}
li {
    float: left;
    border-right: 2px solid black;
}

li:first-child {
    border-left: 2px solid black;
}
li a {
    display: inline-block;
    color: black;
    text-align: justify;
    padding: 36px 40px; 
    text-decoration: underline; 
    font-family: 'Raleway', sans-serif;
}
li a:hover {
    background-color: #5c5c5c;
    color: white; 
}

div.yt {
  margin-left: 0px;
  margin-top: 0px;
} 

#twitter {}

.contentbox {
    font-family: 'Arya', sans-serif;
    font-weight: 700;
    font-size: 2em;
    padding-left: 10px;
    padding-bottom: 0;
    margin-bottom: 0;
    background-color:  grey;
}
.content {
    background-color: grey;
}
p {
    text-indent: 3%; 
    margin: auto;
    max-width: 95%;
}
h3 {
    margin-left: 5px;
    max-width: 95%;
}

!function(d,s,id){
    var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
    if(!d.getElementById(id)){
        js=d.createElement(s);
        js.id=id;
        js.src=p+"://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js,fjs);
    }
}(document,"script","twitter-wjs");

#page {
    margin: auto;
    max-width: 85%; 
    font-family: 'Arya', sans-serif;
    color: white;
    padding-top: 50px;
}

#navbar {
    position: fixed; 
    top: 0;  
    width: 100%;
    margin-left: 11%;
    opacity: 0.8;
    max-width: 85%;

}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: white;
    position: fixed;
}
li {
    float: left;
    border-right: 2px solid black;
}

li:first-child {
    border-left: 2px solid black;
}
li a {
    display: inline-block;
    color: black;
    text-align: justify;
    padding: 36px 40px; 
    text-decoration: underline; 
    font-family: 'Raleway', sans-serif;
}
li a:hover {
    background-color: #5c5c5c;
    color: white; 
}

div.yt {
  margin-left: 0px;
  margin-top: 0px;
  display:inline-block;
} 

#twitter {
  display:inline-block;
}

.contentbox {
    font-family: 'Arya', sans-serif;
    font-weight: 700;
    font-size: 2em;
    padding-left: 10px;
    padding-bottom: 0;
    margin-bottom: 0;
    background-color:  grey;
}
.content {
    background-color: grey;
}
p {
    text-indent: 3%; 
    margin: auto;
    max-width: 95%;
}
h3 {
    margin-left: 5px;
    max-width: 95%;
}