Implementing a manual line break resolves the issue, however, without it, everything becomes jumbled together.
Here is the CSS code being used:
header {
background: #fcb9aa;
color: #f3d9d9;
height:100px;
margin: 0;
padding: 0;
position: relative;
text-align:right;
}
ul {
position: relative;
margin-top: 0px;
padding-left: 10px;
}
header li {
display: inline-block;
margin:30px;
}
body{
margin:0;
padding: 0;
margin-top: 0;
background-color: white;
font-family: 'Pacifico', cursive;
}
a, a:hover, a:focus,a:active{
text-decoration: none;
color:inherit;
font-size: 30px;
font-family: 'Pacifico', cursive;
}
a:hover{
color: #55cbcd
}
h1 {
margin: 40px;
text-align: center;
font-family: 'Pacifico', cursive;
}
h2 {
}
.logo{
border-radius: 50%
}
div.nexto{
display: inline-block;
position: relative;
}
.contentl figure{
height: auto;
width: 600px;
overflow: hidden;
}
.contentl figure img{
height:auto;
width: 600px;
transition: transform .3s ease;
}
figure img:hover{
transform: scale(1.5)
}
div.content{
margin:0;
padding:0;
position: relative;
top: -400px;
left: -20px;
text-align: left;
overflow-wrap: break-word;
}
.substance{
font-family: Arial, Helvetica, sans-serif;
overflow-wrap: break-word;
}
This is the HTML content:
<body>
<header>
<ul>
<li><a>HOME<a></a></li>
<li><a href="albums.html">ARTICLES</a></li>
<li><a href="singles.html">CONTACT</a></li>
<li><a href="artists.html">ABOUT US</a></li>
</ul>
</header>
<section>
<h1>Welcome to my website</h1>
</section>
<section class="contentl">
<div class="nexto">
<figure>
<img src="img/ph1.jpg" alt="im1">
</figure>
</div>
<div class="nexto">
<div class="content">
<h1 class="date">6/7/2021</h1>
<h2 class="name">
PSYCHOLOGY STUFF
</h2>
<h3 class="substance">Psychology is the science of mind and behavior. Psychology includes the study of conscious and unconscious phenomena,<br> as well as feelings and thought. It is an academic discipline of immense<br> scope. Psychologists also seek an understanding of the emergent properties of brains, linking the discipline to neuroscience.</h3>
</div>
</div>
</section>
</body>
</html>
The issue lies within the h3 tag's formatting, necessitating a custom line break to resolve it.
I would greatly appreciate any suggestions or tips on optimizing my code as I currently find it quite complex and confusing to navigate.