Myujth

As you can see on the snippet below, the div with the class divSection is grouped, those div should stay below the text (text 1, text 2, text 3) that are into the div with the class divSection. I could add a margin on divSection, but i want it to have 0 margin when there's no content into the div.

.divSection3, .divSection7
 height: 38px;
 background-color: rgba( 26, 26, 26, 0.7);

.section
 text-align: center;
 padding-top: 13px;
 display: flex;
 flex-basis: 100%;
 align-items: center;
 text-transform: uppercase;

.section::before,
.section::after 
 content: "";
 flex-grow: 1;
 background: rgba(255,255,255, 0.35);
 height: 1px;
 font-size: 0px;
 line-height: 0px;
 margin: 0px 8px;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="container mt-5">
 <div class="row">

 <div class="col-12" style="background-color: red;">

 <div class="row">

 <div class="divSection3 col-lg-12">
 <div>
 <h6 class="section text-white ml-2 mr-2 ml-lg-0 mr-lg-0">Title 1</h6>
 <div>
 <h5>texto 1</h5>
 </div>
 </div>
 </div>

 <div class="divSection7 col-lg-12">
 <div>
 <h6 class="section text-white ml-2 mr-2 ml-lg-0 mr-lg-0">Title 2</h6>
 <div>
 <h5>texto 2</h5>
 </div>
 </div>
 </div>

 <div class="divSection3 col-lg-12">
 <div>
 <h6 class="section text-white ml-2 mr-2 ml-lg-0 mr-lg-0">Title 3</h6>
 <div>
 <h5>texto 3</h5>
 </div>
 </div>
 </div>

 </div>
 
 </div>

 </div>
</div>

This is how it should looks like:

Please just remove the height: 38px; from the .divSection3, .divSection7 selectors because it is redundant.

One more thing, you shouldn't have different names for the classes because the class purpose is to have multiple items selectable with one CSS rule. For unique elements rules you should use IDs instead of classes.

Hope this helps.

How about this?

css:

.divSection 
 background-color: rgba( 26, 26, 26, 0.7);


h5 
 background-color: red;


.u-padding-top 
 padding-top: 5px;


.section
 text-align: center;
 display: flex;
 flex-basis: 100%;
 align-items: center;
 text-transform: uppercase;


.section::before,
.section::after 
 content: "";
 flex-grow: 1;
 background: rgba(255,255,255, 0.35);
 height: 1px;

html:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="container mt-5">
 <div class="row">

 <div class="col-12" style="background-color: red;">

 <div class="row">

 <div class="divSection col-lg-12 u-padding-top">
 <div>
 <h6 class="section text-white ml-2 mr-2 ml-lg-0 mr-lg-0">Title 1</h6>
 <div>
 <h5>texto 1</h5>
 </div>
 </div>
 </div>

 <div class="divSection col-lg-12">
 <div>
 <h6 class="section text-white ml-2 mr-2 ml-lg-0 mr-lg-0">Title 2</h6>
 <div>
 <h5>texto 2</h5>
 </div>
 </div>
 </div>

 <div class="divSection col-lg-12">
 <div>
 <h6 class="section text-white ml-2 mr-2 ml-lg-0 mr-lg-0">Title 3</h6>
 <div>
 <h5>texto 3</h5>
 </div>
 </div>
 </div>

 </div>

 </div>

 </div>
</div>

UPDATED
Took off redundancy