Previously, everything was working fine until it suddenly broke. The column system switches to a 100% width single column at 1500px, but for some reason, the text overflows off the screen around 700px and I can't figure out why. The text at the bottom and the navbar are functioning correctly, but there seems to be an issue with the text breaking.
URL: liammacalister.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="homeStyle.css">
<title>Liam Macalister - Home</title>
</head>
<div class="header">
<h1>Liam Macalister - Portfolio</h1>
</div>
<ul class="topnav">
<li><a href="#header">Home</a></li>
<li><a href="#aboutContent">About Me</a></li>
<li><a href="#unityContent">Unity</a></li>
<li><a href="#unrealContent">Unreal</a></li>
<li><a href="#cvContent">CV</a></li>
<li><a href="#footer">Contact</a></li>
</ul>
<div class="row">
<div class="column">
<h2>Left Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac consequat velit...
(Text truncated for brevity)
</p>
</div>
<div class="column">
<img class="imgMe" src="Me.jpg" alt="Me">
</div>
<div class="column">
<h2>Right Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac consequat velit...
(Text truncated for brevity)
</p>
</div>
</div>
<div id ="aboutContent" class="aboutContent">
<h2> Second Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac consequat velit...
(Text truncated for brevity)
</p>
</div>
<div id ="unityContent" class="unity">
</div>
<div id ="unrealContent" class="unreal">
</div>
<div id ="cvContent" class="cv">
</div>
<div id="footer" class="footer">
<h2>Contact</h2>
</div>
</body>
</html>CSS:
* {
box-sizing: border-box;
}
@font-face{
font-family: PermanentMarker;
src:URL('PermanentMarker.ttf') format('truetype');
}
html {
scroll-behavior: smooth;
}
body{
margin: 0;
}
.header {
font-family: PermanentMarker;
font-size: 28px;
padding: 20px;
text-align: center;
}
h2 {
font-family: PermanentMarker;
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover {background-color: #111;}
ul.topnav li.right {float: right;}
.column {
float: left;
width: 33.33%;
padding: 15px;
/*font-size: 18px;*/
}
p{
font-family: Arial, Helvetica, sans-serif;
}
.row {
content:"";
display: table;
clear: both;
}
.imgMe{
padding-top: 30px;
display: block;
margin-right: auto;
margin-left: auto;
}
.aboutContent{
padding: 15px;
}
.footer {
background-color: black;
color: white;
text-align: center;
padding: 10px;
}
@media screen and (max-width: 2000px){
.column{
width: 50%;
}
}
@media screen and (max-width: 1500px){
.column{
width: 100%;
}
}
@media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li {float: none;
}
.column{
width: 100%;
}
}Any advice?