I'm encountering an issue with my first website development project! The "leftSidebar" and "rightSidebar" boxes are meant to be positioned alongside the main content in the center, but they seem to extend beyond the body boundaries without being contained within it. Can you help me troubleshoot this problem so that the sidebars align correctly with the middle content?
Furthermore, these sidebars are overflowing downwards so much that when I scroll, a white background appears as the browser's background ends. Would you mind testing this issue with your own background to see if you encounter the same problem?
I would greatly appreciate any assistance in resolving this quickly as I'm getting quite frustrated at this point!
Thank you.
body {
background-image: url(wp1.jpg);
background-size: 100%;
background-repeat: no-repeat;
color: white;
}
.body {
width: 70%;
border: 1px solid white;
margin: 5% auto;
clear: both;
}
a {
text-decoration: none;
}
nav ul li {
list-style-type: none;
}
.navHeader nav ul li {
float: left;
display: inline;
margin: 0 auto;
}
.navHeader nav {
border-radius: 5px;
border: 1px dashed white;
height: 50px;
}
.navHeader {
background-color: black;
}
.leftSidebar {
float: left;
border: 1px white solid;
border-radius: 2px;
margin: 2% 0 2% 2%;
width: 20%;
}
.rightSidebar {
float: right;
border: 1px white solid;
border-radius: 2px;
margin: 2% 0 2% 2%;
width: 20%;
}
.allContent {
background-color: black;
width: 60%;
text-align: center;
margin: 0 auto;
}
<body class="body">
<header class="navHeader">
<nav><ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Contact</a></li>
</nav></ul>
</header>
<aside class="leftSidebar">
<content>
<h3> Sidebar Left Title </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</content>
</aside>
standard HTML tags here