images won't float into columns - html

Question

ive been stuck trying to float these pictures into two columns for days. They just stay centered no matter how small i make them. They will be very small and still not float, one time they did float but i cant get back to that and even when they did they were all messy and not making columns, i just want to make columns. i used the .group1 and .group2 classes to target the things to float
<ul class="secondary-content group">
<div class="group1">
<li>
<img src= "MB6.jpg" alt="Wonderful evening">
<p>I've had a perfectly wonderful evening. But this wasn't it.</p>
<p>-Groucho Marx</p>
</li>
<li>
<img src="love3.jpg" alt="Marilyn Monroe">
<p>"A man's only as old as the woman he feels."</p>
<p>-Groucho Marx</p>
</li>
<li>
<img src="MB5.png">
<p>"I intend to live forever, or die trying."</p>
<p>-Groucho Marx</p>
</li>
</div>
<div class="group2">
<li>
<img src="MB2.jpg">
<p>Groucho: "Get outta here before I get arrested."</p>
<p>Chico: "Nah I'd like to stay and see that."</p>
<p>-Groucho Marx</p>
</li>
<li>
<img src="MB4.jpeg">
<p>"honk honk"</p>
<p>Harpo Marx</p>
</li>
<li>
<img src="MB9.jpg">
<p>Groucho: "Do you follow me?"</p>
<p>Margaret Dumont: "Yes!"</p>
<p>Groucho: "Well, you better stop following me, or I'll have you arrested."</p>
</li>
</div>
</ul>
* {
box-sizing: border-box;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
a h1 {
text-align: center;
}
.main-header{
padding-top: 50px;
height: 1000px;
background: linear-gradient(#fff, transparent 60%),
linear-gradient(0deg, #fff, transparent 50%),
url('../MarxBros.jpg') no-repeat center;
}
.intro{
text-align: center;
}
.secondary-content{
width: 40%;
padding-left: 20px;
padding-right: 20px;
margin: 0 auto;
max-width:300px;
text-align: center;
;
}
.secondary-content img{
max-width:300px;
}
.group1 li {
float: left;
}
.group2 li {
float:right
}
.group:after {
content: "";
display: table;
clear: both;
}

Answer 1

You need to fix your HTML structure. Only <li> elements can be direct children of <ul> elements. In this new structure I created two <ul> elements and changed the float to the <ul>'s rather than the <li>'s: jsfiddle
<ul class="secondary-content group group1">
<li>
<img src= "MB6.jpg" alt="Wonderful evening">
<p>I've had a perfectly wonderful evening. But this wasn't it.</p>
<p>-Groucho Marx</p>
</li>
...
</ul>
<ul class="secondary-content group group2">
<li>
<img src="MB2.jpg">
<p>Groucho: "Get outta here before I get arrested."</p>
<p>Chico: "Nah I'd like to stay and see that."</p>
<p>-Groucho Marx</p>
</li>
...
</ul>
.group1 {
float: left;
}
.group2 {
float:right
}
.group:after {
content: "";
display: table;
clear: both;
}