Attached is an image that provides context for the issue I'm facing. https://i.stack.imgur.com/nQXh8.jpg
I'm encountering difficulties with styling a nested div element. When double-clicking the text within this div, only half of it gets highlighted.
Additionally, I need to ensure there's no gap between the wysiwyg editor and the header div.
The text editor I'm using is Django-ckeditor, which is being rendered by the {{form}} template tag since I'm building this application in Django.
This is the structure of my HTML:
<div class="hero clearfix">
<div class="title">
<h2>{{subsection_title}}</h2>
</div>
<br>
<div class="subsection">
<div class="subsection_header ">
<h4 style="text-align:left">Something interesting.</h4>
</div>
<div class="subsection_body">
<p>lol</p>
</div>
</div>
And here's the corresponding CSS:
.subsection {
width:1000px;
margin:auto;
}
.subsection_header {
border:1px solid #ccc;
padding-left:20px;
padding-right:20px;
overflow:auto;
margin:0px;
}
.subsection_body {
margin:0px;
}
.hero {
width:1000px;
margin:auto;
text-align:center;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}