Div not appearing - css issue - html

Question

I have the following code where the bottom section is not displaying and I am not sure why.
This is the part that doesn't display:
<div class="tribeconversation">
<div class="tribeconvo">Joeyc: hey everyone</div>
<div class="tribeconvo">JakeP97: hello joey</div>
<div class="tribeconvo">Joeyc: oi m8, whats up</div>
<div class="tribeconvo">TheKid: LOL hey JakeP</div>
<div class="tribeconvo">Joeyc: RIP</div>
</div>
Fiddle here: https://jsfiddle.net/smvbaa6u/

Answer 1

You've set font-size: 0 to tribeactivity - reset it to initial for the tribeconversation - see demo below:
#tribeactivity {
text-align: center;
font-size: 0;
}
#Amuraheader {
font-family: 'survival';
font-size: 80px;
text-align: center;
color: #2B32E4;
text-shadow: 3px 3px 1px #ffffff;
}
#Malosiheader {
font-family: 'survival';
font-size: 80px;
text-align: center;
color: #DB282B;
text-shadow: 3px 3px 1px #ffffff;
margin-top: 30px;
}
.tribeavi {
width: 149px;
height: 186px;
background-size: cover;
display: inline-block;
}
.tribeaviname {
font-size: 18px;
font-family: 'survival';
text-align: center;
width: 100%;
height: 27px;
padding-top: 3px;
top: 156px;
position: relative;
background-color: rgba(0,0,0,0.7);
color: white;
}
.tribeconversation {
display: inline-block;
font-size: initial;
}
<div id="tribeactivity">
<div id="Amuraheader">Amura</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/Riku1274-14154.png?v=2053856125')">
<div class="tribeaviname">Riku1274</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/realityobsessed-7881.png?v=625345208')">
<div class="tribeaviname">Reality</div>
</div>
<div class="tribeavi" style="background-image: url('http://www.zwooper.com/media/avatars/johnnyscott1127-7443.png?v=590056866')">
<div class="tribeaviname">Johnny</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/exploremedora-7274.png?v=1507280925')">
<div class="tribeaviname">ExploreMe</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/yswimmer96-1356.png?v=386446076')">
<div class="tribeaviname">Yswimmer</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/xStqqd-16258.png?v=173536863')">
<div class="tribeaviname">xStqqd</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/AngelOfWater-885.png?v=430260016')">
<div class="tribeaviname">Angelofwater</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/a07strand-9696.png?v=259628760')">
<div class="tribeaviname">A07Strand</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/JakeP97-3100.png?v=529092857')">
<div class="tribeaviname">JakeP97</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/joeyc-13212.png?v=101411917')">
<div class="tribeaviname">JoeyC</div>
</div>
<div id="Malosiheader">Malosi</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/SuperDoodle-2870.png?v=1868660820')">
<div class="tribeaviname">SuperDoodle</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/wwxcrunner1-1056.png?v=48014610')">
<div class="tribeaviname">wwxcrunner</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/King_Canine-10700.png?v=327204573')">
<div class="tribeaviname">King_Canine</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/WILLZ14-8313.png?v=620214729')">
<div class="tribeaviname">Willz14</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/BostonRob524-7935.png?v=1279836291')">
<div class="tribeaviname">BostonRob</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/devon19-10680.png?v=168166820')">
<div class="tribeaviname">Devon19</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/Alvarovidalpuga-8630.png?v=1796517703')">
<div class="tribeaviname">Alvaro</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/Ginger7-4349.png?v=564697580')">
<div class="tribeaviname">Ginger7</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/TheKid-22456.png?v=626667976')">
<div class="tribeaviname">TheKid</div>
</div>
<div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/joeyc-13212.png?v=101411917')">
<div class="tribeaviname">Krystiian</div>
</div>
<div class="tribeconversation">
<div class="tribeconvo">Joeyc: hey everyone</div>
<div class="tribeconvo">JakeP97: hello joey</div>
<div class="tribeconvo">Joeyc: oi m8, whats up</div>
<div class="tribeconvo">TheKid: LOL hey JakeP</div>
<div class="tribeconvo">Joeyc: RIP</div>
</div>
</div>

Answer 2

The div .tribeconvo inherits a font-size:0; from #tribeactivity.
#tribeactivity {
text-align: center;
font-size: 0;
}
Therefore, the .tribeconversation div has a height:0 and doesn't appear. Just add a font size bigger than 0 to .tribeconvo to fix this.
.tribeconvo{
font-size: 16px;
}