As a newcomer to Stack Overflow and Bootstrap, I am encountering issues with using two columns of size 2 and 10. When implemented, they overlap each other; however, adjusting them to sizes 3 and 9 results in too much space between them.
I attempted to find a solution on Stack Overflow by referring to this thread about bootstrap columns overlapping, but even after ensuring that my column sum equaled 12 for every row, the issue persisted.
Below is an excerpt from my HTML code:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="customcss.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<div id="sidebar" class="customdiv" style="background-color: green;">
<ul>
<li><h1 style="margin-left: -15px">project</h1></li>
<li><h1 style="margin-left: 15px">part1</h1></li>
</ul>
<hr style="background-color: gold; height: 2px">
<br>
<ul id="list-header">
<li>project</li>
<li>project</li>
<li>project</li>
<li>project
<ul>
<li>project</li>
<li>project</li>
<li>project</li>
</ul>
</li>
<li>project
<ul>
<li>project</li>
<li>project</li>
<li>project</li>
<li>project</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-lg-10">
<div class="customdiv">
<img src="zoo.jpg" class="img-fluid">
</div>
</div>
</div>
</div>
</body>
</html>
Accompanied by my CSS code:
html,body {
height: 100%;
}
#sidebar{
width: 250px;
position: fixed;
left: 250px;
height: 100%;
margin-left: -250px;
}
#list-header li{
padding-top: 10px;
padding-bottom: 10px; }
.customdiv li {
display: block;
}
Providing the following output:
Click here for the displayed output
Also viewable when resizing the window: