Currently, I am in the process of designing a website with three main divs all on one page. To visually separate these divs, I have included a subtle horizontal line.
The horizontal line between the first and second div looks correct as intended.
However, the issue arises between the second and third div - the horizontal line appears below the second div. This problem seems to be related to the relative positioning of the container for the second div, which is necessary for image placement.
I have attempted solutions such as using display:block and enclosing the second div within another container, but none have resolved the issue.
One alternative could be using a div with a background/border instead of an hr, although I'm uncertain if this is the optimal approach given my current knowledge level.
Below is the code snippet for the 'second div' along with the hr that I'm struggling to position.
<!-- PORTFOLIO -->
<div id="portfoliocont">
...
</div>
<hr>
And here is the CSS used:
hr {
margin: 40px 0px;
border: none;
height: 1px;
color: #ececec;
background-color: #ececec;
}
...
Thank you