I've been immersed in creating a website, but I encountered an issue for which I can't seem to find the solution.
Check out my text alignment here (test) - it's not aligned all the way to the left of the content
Here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The HTML5</title>
<link rel="stylesheet" href = "style.css">
<style>
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Zieke Site</h1>
</div>
<div class="topnav">
<a href="#">Menu</a>
</div>
<div class="content">
<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
<p>Test</p>
<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
<p>Test</p><p>Test</p>
<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
<div class="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
This is my CSS code:
body {
margin: 0;
}
.topnav {
background-color: #333;
height: 28px;
}
.topnav a {
float: left;
color: white;
padding: 5px 15px;
text-decoration: none;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.header {
background-color: #747474;
text-align: center;
height: 80px;
line-height: 80px;
}
.content {
background-color: rgba(255, 255, 255, 0.9);
text-align: left;
height: Calc(100vh - 182px);
overflow: auto;
}
.footer {
background-color: #747474;
text-align: right;
padding: 1px 20px;
}
.container {
margin: 0 auto;
width: 70%;
}
Hopefully, someone can help me figure this out. I'm still new to coding, so please bear with me if it's an easy fix 😄!