Remove spacing between and

Question

I'm trying to put the div right below hr tag but it doesn't seem to work. I tried adding padding: 0; margin: 0; Instead nothing changes. Right now I have this:

But instead I want something like the image below:

HTML:

<hr class="hr">
        
<div class="alttxt">
  <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 knostrud 
  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
  dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
  mollit anim id est laborum. </p>
</div>

CSS:

.hr {
    border: 3px solid #ffffff;
    margin: 0 5% 0 5%;
    padding-bottom: 0 !important;
}
.alttxt {
    background-color: rgba(1,1,1,0.5);
    margin-top: 0 !important;
    margin: 0 5% 0 5%;
}
.alttxt p {
    text-align: justify;
    padding: 3% 3% 3% 3%;
    color: white;
    font-size: 140%;
}

Answer 1

Remove the default margin from the paragraph

.hr {
  border: 3px solid red;
  margin: 0 5% 0 5%;
}
.alttxt {
  background-color: rgba(1, 1, 1, 0.5);
  margin: 0 5% 0 5%;
}
.alttxt p {
  text-align: justify;
  padding: 3% 3% 3% 3%;
  color: white;
  font-size: 140%;
  margin: 0;
}

<hr class="hr">
        
<div class="alttxt">
  <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 knostrud 
  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
  dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
  mollit anim id est laborum. </p>
</div>

Answer 2

Play with the .alttxt margins I chose 7% That's the only change I made to your css

.hr 
{
    border: 3px solid #0000ff;
    margin: 0 5% 0 5%;
    padding-bottom: 0 !important;
}

.alttxt
{
    background-color: rgba(1,1,1,0.5);
    margin-top: 0 !important;
    margin: 0 7% 0 7%;

    p
    {
        text-align: justify;
        padding: 3% 3% 3% 3%;
        color: white;
        font-size: 140%;
    }
}