As I venture into the world of HTML, I am facing a challenge with placing titles below two images. Every time I attempt to add either h or p, the text ends up on the right side instead of below the images. What could I be doing wrong? This is all part of my learning process in HTML and it's crucial for an upcoming exam. Any guidance would be greatly appreciated.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Exploring Photography</title>
</head>
<body>
<div class="content">
<div id="page-title">
<h1>Exploring Photography</h1>
<div id="navigation">
<ul id="nav-items">
<li><a href="index.html" id="home">Home</a></li>
<li><a href="landscapes.html" style="text-decoration: underline">Landscapes</a></li>
<li><a href="portraits.html" style="text-decoration: underline">Portraits</a></li>
</ul>
<div style="clear:both"></div>
</div>
</div>
<div>
<section id="center">
<img id="central-img" style="align-content: center" src="img/landscape-center.png" alt="image-central" title="landscape1" width="730" height="413">
</section>
<article id="side-by-side">
<img id="left-img" src="img/cover.jpg" alt="right-image" title="landscape2" width="640" height="400">
<img id="right-img" src="img/woman.jpg" alt="left-image" title="portrait1" width="736" height="1104">
</article>
</div>
<footer class="footer">
<div id="footer1">
<section id="contact">
<h3>Contact</h3>
<p>Email: <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="671503020b061508140657535557565e27000a060e0b4904080a">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c2e3839303d2e332f3d6c686e6c6d651c3b313d3530723f3331">[email protected]</a></a></p>
<p>3rd Avenue, La Paz</p>
<p>Phone: 220-0000</p>
</section>
<section id="terms">
<h3>Terms</h3>
<p>All rights reserved, and content is private</p>
</section>
<section id="social-media">
<h3>Social Media</h3>
<a target="_blank" href="https://www.facebook.com"><img src="icon/facebook.png">Exploring Photography</a>
<a target="_blank" href="https://twitter.com/"><img src="icon/twitter.png">@exploringphotography</a>
<a target="_blank" href="https://www.instagram.com/?hl=en"><img src="icon/instagram.png">#exploringphotography</a>
</section>
<section id="rights">
<h3>Rights</h3>
<p>Ruben De La Rosa</p>
<p>Copyrights©-2017</p>
</section>
</div>
</footer>
</div>
</body>
</html>
body{
background-color: #02010a;
color: white;
}
.content{
width: 900px;
margin: 0 auto;
text-align: center;
}
#page-title{
background-color: #5b7989;
width: 100%;
height: 100px;
margin-top: 0 auto;
display: block;
position: relative;
border-top-left-radius: 10px;
border-top-right-radius: 10xp;
}
h1{
float: left;
display: inline-block;
text-shadow: 2px 2px #02010a;
padding-left: 10px;
}
a{
text-decoration: none;
}
ul li a{
color: white;
}
#navigation{
float: right;
}
#nav_items{
list-style-type: none;
font-size: 100%;
padding: 10px 10px 10px 10px;
}
li{
display: inline;
}
#center{
background-color: #82c3a6;
width: 900px;
height: 450px;
display: block;
position: relative;
}
#central-img{
align-content: center;
margin-top: 15px;
}
#side-by-side{
background-color: #d5c75f;
border-width: 1px;
display: flex;
height: 500px;
width: 900px;
overflow: hidden;
align-content: center;
}
#left-img{
height: 300px;
width: auto;
position: relative;
margin: 60px auto;;
}
#right-img{
height: 300px;
width: auto;
position: relative;
margin: 60px 70px auto;
align-content: center;
}