not able to extend the border beyond the container's width - html

Question

.container {
display: flex;
justify-content: start;
border-right:1px solid black;
}
.side-nav {
border-right: 1px solid #111;
height: 200px;
padding-right: 20px;
}
.main-content {
margin-right: 20px;
margin-left: 20px;
}
.divider {
border-bottom: 1px solid gray;
}
.divider:before{
position: relative;
content: "";
width: 100%;
top: 1px;
right: 22px;
padding-right: 20px;
padding-left: 20px;
border-bottom: 1px solid gray;
}
<div class="container">
<div class="side-nav">
one
</div>
<div class="main-content">
two
<div class="divider"></div>
<p>some content gdvsgsgfghdgfhgdsfgdsgfdsfgdsfgdsgfgdsfgdsgfdsgfdsgfgdsgfffdfghjfghj</p>
<div class="divider"></div>
</div>
</div>
I'm creating a page layout. Inside the container, there are two containers- side-nav and main-content. In the main-content, there is a p tag with some demo text. the p tag is surrounded by two border containers. I m not able to extend the border lines upto the main container width. I have given a snippet of it, Can someone please help me to resolve this issue.

Answer 1

If I understand you correctly, add flex: 1 to .main-content so it will take the whole width that left.
.container {
display: flex;
justify-content: start;
border-right: 1px solid black;
}
.side-nav {
border-right: 1px solid #111;
height: 200px;
padding-right: 20px;
}
.main-content {
margin-right: 20px;
margin-left: 20px;
flex: 1;
}
.divider {
border-bottom: 1px solid gray;
}
.divider:before {
position: relative;
content: "";
width: 100%;
top: 1px;
right: 22px;
padding-right: 20px;
padding-left: 20px;
border-bottom: 1px solid gray;
}
<div class="container">
<div class="side-nav">
one
</div>
<div class="main-content">
two
<div class="divider"></div>
<p>some content gdvsgsgfghdgfhgdsfgdsgfdsfgdsfgdsgfgdsfgdsgfdsgfdsgfgdsgfffdfghjfghj</p>
<div class="divider"></div>
</div>
</div>
But seems you have more problems here. For example, if there is no enough space, the right border is displayed on top of the text. Also, small extra top and bottom borders in the left of the .main-content. What're you trying to do? How it should look?

Answer 2

You have given right:22px in your :before. That's causing the issue here.
.container {
display: flex;
justify-content: start;
border-right: 1px solid black;
}
.side-nav {
border-right: 1px solid #111;
height: 200px;
padding-right: 20px;
}
.divider {
border-bottom: 1px solid gray;
}
.divider:before {
position: relative;
content: "";
width: 100%;
top: 1px;
padding-right: 20px;
padding-left: 20px;
border-bottom: 1px solid gray;
}
p {
word-break: break-word;
padding:10px
}
<div class="container">
<div class="side-nav">
one
</div>
<div class="main-content">
<p style="padding:0 10px;margin:0">two</p>
<div class="divider"></div>
<p>some content gdvsgsgfghdgfhgdsfgdsgfdsfgdsfgdsgfgdsfgdsgfdsgfdsgfgdsgfffdfghjfghj</p>
<div class="divider"></div>
</div>
</div>

Answer 3

I honestly have no idea what you're trying to do here, but the modified example below looks a bit better, no?
.container {
display: flex;
justify-content: start;
border-right: 1px solid black;
}
.side-nav {
border-right: 1px solid #111;
height: 200px;
padding-right: 20px;
}
.main-content {
padding: 0 20px;
word-break: break-word;
}
.divider {
border-top: 1px solid tomato;
border-bottom: 1px solid gray;
display: block;
margin: 0 -20px;
position: relative;
}
<div class="container">
<div class="side-nav">
one
</div>
<div class="main-content">
two
<hr class="divider" />
<p>some content gdvsgsgfghdgfhgdsfgdsgfdsfgdsfgdsgfgdsfgdsgfdsgfdsgfgdsgfffdfghjfghj</p>
<hr class="divider" />
</div>
</div>
I don't see the reason for having the :before element within the divider if it then has the same color as the border anyways, you could just make the border 2px...or more generally, even if you need different colors, you can just work with top/bottom borders and you don't need the :before at all, you could also choose to got with an <hr /> element for that purpose, would be more semantic anyways =)