Hello! I am creating a sort of table to list skills in rows, what are meant to be rows of FlexBox containers with items inside of them. I am having trouble using the HTML and CSS to do what I want: make multiple FlexBox rows of data that can sit beneath one another. I will be able to read responses in 12 hours minimum from this post. Here is what I have written and what it produces: HTML <div class="core_lists1_skills">
<div class='prototype_row3container'>
<p class='prototype_row3item bold_text'>Skill Name |</p>
<p class='prototype_row3item bold_text'>| Custom Modifier |</p>
<p class='prototype_row3item bold_text'>| Skill Difficulty |</p>
<p class='prototype_row3item bold_text'>| Characteristic |</p>
<p class='prototype_row3item bold_text'>| Skill Type |</p>
<p class='prototype_row3item bold_text'>| Trained |</p>
<p class='prototype_row3item bold_text'>| +10 Bonus |</p>
<p class='prototype_row3item bold_text'>| +20 Bonus |</p>
</div>
<div class='prototype_row3container'>
<p class='prototype_row3item bold_text'>Camoflage</p>
<input name='attr_skillname_mod2' type='text' value='0' class='prototype_row3item prototype_row3item_num'>
<p class='prototype_row3item bold_text'>Basic</p>
<select name='attr_skillname_mod1' class='prototype_row3item prototype_row3item_stat'>
<option value='@{STR} + @{STR_advancement}' selected='selected'>STR</option>
<option value='@{TOU} + @{TOU_advancement}' >TOU</option>
<option value='@{AGI} + @{AGI_advancement}' >AGI</option>
<option value='@{WFR} + @{WFR_advancement}' >WFR</option>
<option value='@{WFM} + @{WFM_advancement}' >WFM</option>
<option value='@{INT} + @{INT_advancement}' >INT</option>
<option value='@{PER} + @{PER_advancement}' >PER</option>
<option value='@{CR} + @{CR_advancement}' >CR</option>
<option value='@{CH} + @{CH_advancement}' >CH</option>
<option value='@{LD} + @{LD_advancement}' >LD</option>
</select>
<p class='prototype_row3item bold_text'>Field</p>
<input name="attr_skillname_mod3" type="checkbox" value="20" class='prototype_row3item'>
<input name="attr_skillname_mod3" type="checkbox" value="30" class='prototype_row3item'>
<input name="attr_skillname_mod3" type="checkbox" value="40" class='prototype_row3item'>
<button type="roll" name="skillname_roll" value='/me rolls skillname with [[floor(([[@{skillname_mod1}]]+@{skillname_mod2}+[[@{skillname_mod3} -20]]+?{Modifier|0}-1d100)/10)]] degrees of success'></button>
</div>
</div>
CSS .sheet-prototype_row3container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
}
.sheet-prototype_row3item {
flex-basis: 20px;
margin: 10px 5px
}
.sheet-prototype_row3item_stat { width: 70px }
.sheet-prototype_row3item_num { width: 35px }
What I get on left - all compacted onto one row instead of a new row. Right image is one row
