how do i remove the gap between the gray background color and right side browser boundary?

Question

   

body{
    font-family:'Montserrat';
    
}

.content{
    background-color:#d9d9d9;
}



   

p.dates{
    display:inline-block;
    font-weight:800;
    margin-right:20px;
    width:120px;
    text-align:center;
    margin-top:0;
    margin-bottom:0;
    
}
p.content{
    display:inline-block;
    text-align:left;
    width:85%;
    height:50px;
    
    margin-top:0;
    margin-bottom:0;
       
}

   
    </div>
    <div class="timeline-content">
        <br>
        <hr>
        <p class="dates">28 June 1971</p>
        <p class="content">Elon Reeve Musk was born on June 28 1971 in Pretoria, South Africa.</p><br><hr>
        
        <p class="dates">1988</p>
        <p class="content">Elon moved to Canada when at the age of 17 to attend Queen's University.</p><br><hr>

        <p class="dates">1990</p>
        <p class="content">Elon was transferred to University of Pennsylvania, where he received dual bachelor's degrees in Economics and Physics.</p><br><hr>
        <p class="dates">1995</p>
        <p class="content">He moved to california to begin a Ph.D in applied physics and material sciences at Stanford University, but dropped out after 2 days to pursue a business career.</p><br><hr>
    </div>

    </div>
</body>
</html>

the text present in the lower portion of the page with gray background is what i am talking about

I am creating this tribute web page but in the portion which contains details of the correponding date/year i am unable to remove the gap between gray background and right side browser boundary.

score 0 · Answer 1 · answered Sep 20 '20 at 07:38

There is one way to do that without changing your HTML structure. Use calc() function in CSS for width, inside .content. And set it like this :

width: calc(100% - 144px);

NOTE : It'd work but the value 144px is fixed. The reason is because there is fixed width for date i.e. 120px, and there are properties like margin.

body {
  font-family: 'Montserrat';
}

.content {
  background-color: #d9d9d9;
}

p.dates {
  display: inline-block;
  font-weight: 800;
  margin-right: 20px;
  width: 120px;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
}

p.content {
  display: inline-block;
  text-align: left;
  width: calc(100% - 144px);
  height: 50px;
  margin-top: 0;
  margin-bottom: 0;
}

</div>
<div class="timeline-content">
  <br>
  <hr>
  <p class="dates">28 June 1971</p>
  <p class="content">Elon Reeve Musk was born on June 28 1971 in Pretoria, South Africa.</p><br>
  <hr>

  <p class="dates">1988</p>
  <p class="content">Elon moved to Canada when at the age of 17 to attend Queen's University.</p><br>
  <hr>

  <p class="dates">1990</p>
  <p class="content">Elon was transferred to University of Pennsylvania, where he received dual bachelor's degrees in Economics and Physics.</p><br>
  <hr>
  <p class="dates">1995</p>
  <p class="content">He moved to california to begin a Ph.D in applied physics and material sciences at Stanford University, but dropped out after 2 days to pursue a business career.</p><br>
  <hr>
</div>

</div>
</body>

</html>

how do i remove the gap between the gray background color and right side browser boundary?

1 Answers1