I have been struggling to format a project I am currently working on for university with no success. I would like the 3 iframes to be displayed inline-block (i1 next to i2 next to i3). I apologize for overcomplicating the classes, my brain is fried at this point. Here is an excerpt of my HTML code:
<section class="trailer">
<h2>Media</h2>
<article>
<h3>CHILDREN OF NOBODY - OFFICIAL TRAILER</h3>
<iframe src="videos/teaser.mp4" class="trailer"></iframe>
</article>
<article>
<h3>Official page</h3>
<iframe src="http://www.imbc.com/broad/tv/drama/childrenofnobody/" class="trailer"></iframe>
</article>
<article>
<h3>Making video</h3>
<iframe src="videos/makingvideo.mp4" class="trailer"></iframe>
</article>
</section>
Here is my CSS as well:
.trailer>iframe{
display: inline-block;
width: 30%;
height: auto;
border-top: #c00 10px dotted;
border-right: #c00 20px dotted;
border-left: #c00 20px dotted;
border-bottom: #c00 40px dotted;
}