I want to add an image below the paragraph text that I've set. I want to keep it within the same section as my "Welcome to Ingeniator Engineering" bit and therefore reduce the whitespace that is in that area. (I still need to have the other picture and text too). Please can someone advise me if that would be possible and if so how can I do it?
I've tried reducing the div class lg size to 4 and 5 (currently set at 9) and adding in another div class row but the image comes up below the latest news part which isn't what I want. I added in more code to save div class lg-4 but the picture didn't show below the paragraph text. Current coding is below:
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<script src="/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<link href="/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="landing3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container-fluid p-5 bg-translucent">
<h1>Ingeniator Engineering</h1>
</div>
<!-- Dropdown menu -->
<nav class="navbar navbar-expand-lg navbar-dark background fixed-top">
<div class="container">
<br>
<a href="index.html" class="navbar-brand" href="#"><img src="logo6.png" alt="logo" class="img-fluid"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggle">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<ul class="navbar-nav ms-auto mt-2 my-lg-0">
<li class="nav-item">
<a href="#Home" class="nav-link active">Home</a>
</li>
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Works</a>
<ul class="dropdown-menu">
<li>
<a href="locations.html" class="dropdown-item">Locations</a>
</li>
<li>
<a href="projects.html" class="dropdown-item">Previous projects</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="blog.html" class="nav-link">Blog</a>
</li>
<li class="nav-item">
<a href="testimonies.html" class="nav-link">Testimonies</a>
</li>
<li class="nav-item">
<a href="contact_me.html" class="nav-link">Contact me</a>
</li>
</ul>
</div>
</div>
</nav>
<!--About me start -->
<section class="my-4">
<div class="container about">
<div class="row">
<div class="col-lg-9">
<div class="bg-white shadow rounded-3 p-5 p-md-5">
<h1>Welcome to Ingeniator Engineering</h1>
<br>
<p>My name is Paul and I am a very
experienced Freelance Setting Out Engineer living in Suffolk, UK.
I have worked for a number of organisations in various different
locations. I have been involved in a number of projects.
More information is available on my Works page.</p>
<br>
</div>
</div>
<div class="col-lg-3">
<div class="my-picture bg-white shadow text-center my-3 rounded-3 p-3">
<img src="Images/me.png" alt="my picture" class="rounded-circle">
<p class="fs-2 fw-bold pt-3 name">Paul Runnacles</p>
<p>Please feel free to browse my website for information about me.</p>
<h3>Latest news:
<br>
<p>I am currently working at multiple sites in Suffolk on an ongoing basis. Details of these can be found on my Works page.</p></h3>
</div>
</div>
</div>
</div>
</section>
<footer class="bg-dark">
<p class="mb-0 text-black text-center py-3">
<a class="text-success text-decoration-none fw-bold" target="_blank" href="https:www.ingeniator.co.uk">@Copyright | Ingeniator Engineering 2025 | All rights reserved</a>
</p>
</footer>
</body>