Some hyperlinks in list aren't clickable - html

Question

I am new to html so please don't mind the terrible coding..
I've created a list of links on my page in wordpress, but for some reason the first few aren't clickable. They seem to be fine here, but on my page they suddenly stop working
Here's the part of my HTML having issues:
.parent {
text-align: left;
}
.parent > ul {
display: inline-block;
}
<div class="parent" style="text-align: left; margin-left:0 auto; margin-right:0 auto; position: relative; top: +0px; right: 10px;">
<ul style= "font-size: 20px;">Public Open Sessions:
<li style="font-size: 16px;"><a href="http://shopkts.com/collections/training/products/3-day-uem-public-open-session-april-11" target="_blank" !important>April 11-13, Mississauga, Canada</a></li>
<li style="font-size: 16px;">April 18-20, Atlanta, USA</li>
<li style="font-size: 16px;">April 25-27, Calgary, Canada</li>
<li style="font-size: 16px;">May 2-4, Vancouver, Canada</li>
<li style="font-size: 16px;">May 9-11, Philadelphia, USA</li>
<li style="font-size: 16px;">May 16-18, Washington, DC, USA</li>
<li = style="font-size: 16px;">May 23-25, Dallas, USA</li>
</ul>
</div>
What's strange is the the first 3 links won't work, while the next 4 do. But if I move it to another part of the page, it suddenly works. Is it due to something else on the page?
Here is the full html incase it's needed:
.parent {
text-align: left;
}
.parent > ul {
display: inline-block;
}
<p style="text-align: center; font-size: 40px; color: black"> BlackBerry Open Sessions</p>
<p style="text-align: left;"><img class="alignnone size-full wp-image-1950" src="http://www.ktsglobal.ca/wp-content/uploads/2016/06/ps-1-e1478718264230.png" alt="ps" width="1766" height="569" /></p>
<p style="text-align: left; line-height:2px">Our public open sessions consists of instructor-led training and hands-on virtual labs. Participants will learn to Plan, Deploy and Manage BlackBerry UEM or BES12</p>
<p style="text-align: left; line-height:2px">with one of our certified instructors. Make sure to check back regularily to see our updated list of events.</p>
<hr />
<p style="text-align: center; font-size: 24px;"><img class="wp-image-1922 alignleft" src="http://www.ktsglobal.ca/wp-content/uploads/2016/11/shutterstock_196196186-e1478532776565.jpg" alt="shutterstock_196196186" width="505" height="346" /> Upcoming Public / Virtual Events:</p>
<p style="text-align: center; font-size: 18px;"></p>
<div class="parent" style="text-align: left; margin-left:0 auto; margin-right:0 auto; position: relative; top: +0px; right: 10px;">
<ul style= "font-size: 20px;">Public Open Sessions:
<li style="font-size: 16px;"><a href="http://shopkts.com/collections/training/products/3-day-uem-public-open-session-april-11" target="_blank" !important>April 11-13, Mississauga, Canada</a></li>
<li style="font-size: 16px;">April 18-20, Atlanta, USA</li>
<li style="font-size: 16px;">April 25-27, Calgary, Canada</li>
<li style="font-size: 16px;">May 2-4, Vancouver, Canada</li>
<li style="font-size: 16px;">May 9-11, Philadelphia, USA</li>
<li style="font-size: 16px;">May 16-18, Washington, DC, USA</li>
<li = style="font-size: 16px;">May 23-25, Dallas, USA</li>
</ul>
</div>
<div class="parent" style="margin-left:0 auto; margin-right:0 auto;position: relative; top: -238px; right: -380px;">
<ul style= "font-size: 20px;">Virtual Sessions:
<li style="font-size: 16px;">March 29-31</li>
<li style="font-size: 16px;">April 12-14</li>
<li style="font-size: 16px;">April 26-28</li>
</ul>
</div>
<p style="text-align: right; font-size: 20px; position: relative; top: +0px; right: 10px;">Click the training session you'd like to join to see more and sign up.<p/>
<hr style="position: relative; top: -30px;"/>
<img class="wp-image-1949 alignright" src="http://www.ktsglobal.ca/wp-content/uploads/2016/06/las-vegas-signs-clouds-blue-sky-1920x1080-e1478718166731.jpg" alt="las-vegas-signs-clouds-blue-sky-1920x1080" width="486" height="392" />
<p style="text-align: center; font-size: 24px;">Coming Soon</p>
<p style="font-size: 18px;">We are planning a special 3-day BlackBerry UEM training event in Las Vegas.</p>
<p style="font-size: 18px;">The training will focus on some new and exciting features of BlackBerry UEM.</p>
<p style="font-size: 18px;">Feel free to contact our team for more information. We hope to see you there!</p>
<hr style="position: relative; top: 20px; width:100%;"/>
<p style="text-align: center;font-size: 20px"><strong><span style="color: #0020c2;">Contact us for more info</span></strong></h4></p>
It looks like a mess but trust me, it works on the page.
Here's a link to the page
Any help would be great, thank you in advance!

Answer 1

Think I found it.
Try this:
.parent {
overflow: auto;
}
Your second "parent" div is covering up your links. Your code is actually really basic, so this probably isn't the best way to solve it, but it will work for you at this point.

Answer 2

I tried it and it worked fine, even in your webpaged link above. I don't see any problem. However, I found a typo (?) in the last <li>
<li = style="font-size: 16px;">
It should be:
<li style="font-size: 16px;">