I am currently working on a website and facing challenges in grasping the concept of alignment using CSS. I am struggling to align both text and image horizontally, ensuring they fit properly within the screen dimensions. Despite my attempts to modify different elements for alignment purposes, I have not achieved successful results.
https://i.sstatic.net/uxG7u.jpg
Below is the excerpt from my code:
<!doctype html>
<html lang="en">
<head>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Biopage</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2d0ddddc6c1c6c0d3c2f2879c819c829fd3dec2dad380">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<link rel="stylesheet2" href="/bio_style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">Joseph Albers</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="bio.html">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="artworks.html">Artworks</a>
</li>
</ul>
</div>
</div>
</nav>
<h1 class="heading"> Biography </h1>
<div class="general">
Josef Albers was born in Bottrop, a coal-mining city in the industrial Ruhr Valley, on 19 March 1888. His father was a general contractor who was proficient in carpentry, house-painting, plumbing, and other crafts; for the rest of his life, Josef would consider that the way his father trained him in the materials and techniques of these crafts was of vital importance to him. Josef became a school teacher, initially instructing young children in all subjects, and then an art teacher. He painted, made drawings of the region, and became a printmaker; as a teacher, he had an exemption that kept him out of the army during World War I.
<img class="young_albers" src="_assets/picture1.jpeg" width=308px class="rounded float-end" alt="Young Joseph Albers">
</div>
<h3>Bauhaus</h3>
<img src="_assets/picture2.png" alt="Bauhaus Students">
<div>
<h5>Josef Albers arrived at the Weimar Bauhaus in 1920, the year after it was founded. He was supported by the Westphalian Regional Teaching System with the understanding that after a year he would return to the Bottrop region and resume his old job. But at the Bauhaus he became too intrigued with making assemblages out of discarded glass shards and bottle bottoms that he found in the town dump to consider leaving, and although he was told he had to try other media, he gained such respect from the Bauhaus masters that in 1925 he was one of the first students to be appointed a master. In 1922, Annelise Fleischmann had arrived from Berlin; she met Josef soon thereafter. She was initially turned down in her efforts to be admitted to the Bauhaus, but Josef helped her for a second set of tests, and she was admitted to the weaving workshop. They married in 1925. Anni would eventually direct the weaving workshop; Josef would work in carpentry, metalwork, glass, photography, and graphic design. At the Dessau Bauhaus, they lived in one of the Masters’ Houses, and in 1932, when the city government of Dessau stopped paying teachers’ salaries, they joined others at the Bauhaus when the school moved to makeshift headquarters in Berlin. In 1933, when the Bauhaus faculty, Josef among them, elected to close the school rather than comply with the Third Reich, the Alberses were left without jobs and with complete uncertainty about the future, especially because they already realized the significance of Anni being Jewish in the Nazi era.
</h5>
</div>
</body>
<style>
.general {
width: 80vw;
overflow-wrap: break-word;
display: flex;
flex-direction: row;
align-items: center;
height: 100vh;
margin: 2vw;
text-align: left;
font-size: 24px;
}
.heading {
padding: 20px;
padding-left: 0%;
margin-left: 2vw;
}
</style>
I experimented with adjusting sizes and margins to resolve the issue, however, those modifications did not yield the desired outcome.