1

I have a container class, row class and column class. I have a row, inside which there are two columns. Both are set to 50% width. But, the left side column's text isn't completely occupied in that column. Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous"> 
  <style>

    * {
      box-sizing: border-box;
      padding-left: 50px;
      padding-right: 50px;
    }

    .container {
      position: relative;
      border-radius: 10px;
      box-shadow: 5px 5px 3px grey;
      background-color: #FFFFFF;
      padding: 0px 0 0px 0;
      height:100%;
    }

    .navbar {
        background-color: #000000;
        width: 100%;
        height: 70px;
        padding: 4px 10px 0px 0px;
        border-radius:10px 10px 0px 0px;
     }

    .navbar a {
        color:white;
        font-family: Lato, sans-serif;
        text-align: center;
        padding: 10px 10px;
        text-decoration: none;
        float:right;
        margin-left:-35px;
        font-size: 14px;
        font-weight:bold;
    }
    .fas {
        font-size:26px;
    }    
    .row:after {
      content: "";
      display: table;
      clear: both;
    }

    .col {
          float: left;
          width: 50%;
          height:100%;
          margin: auto;
          margin-top:70px;
          margin-bottom:6px;
          padding-left:5px;
    }

    .txt {
        font-family:Montserrat, sans-serif;
        font-weight:bold;
        text-align: left;
        font-size:20px;
    }
  </style>
</head>
<body>
  <div class="container">

          <div class="navbar">
          <a href="#"><i class="fas fa-user-plus"></i><br>Sign Up</a>
              <a href="#"><i class="fas fa-sign-in-alt"></i><br>Login</a>
          </div>

           <div class="row">
                <div class="col">
                    <div class="txt">
                        <p style="align:justify"><br><br>
                        Education is the process of facilitating learning<br>
                        Acquisition of knowledge<br>
                        Make Informed decision about your future<br>
                        Let's discover opportunities
                        </p>
                    </div>
           </div>
                <div class="col">
                        <img class="img-responsive" src="book.png" width="500" height="400">
                </div>
           </div>
  </div>
</body>
</html>

Here is how the html page looks like.

The left side col has text only in a part of the column. I need the text to be extended on both the sides and fill the left col.

3
  • 1
    Remove the <br> tags to start with
    – Paulie_D
    Commented May 23, 2019 at 9:23
  • Looks like your <div class="txt"> should be a <ul> and your text should be wrapped in <li> tags. And as @Paulie_D says, remove the <br> tags.
    – ScottieG
    Commented May 23, 2019 at 9:37
  • Quite simply, there isn't enough free space inside the paragraph to let the text spread out. As indicated below, remove the 50px/100px padding you have on everything.
    – Paulie_D
    Commented May 23, 2019 at 9:39

1 Answer 1

Reset to default
1 

    * {
      box-sizing: border-box;
      padding-left: 50px;
      padding-right: 50px;
    }

    .container {
      position: relative;
      border-radius: 10px;
      box-shadow: 5px 5px 3px grey;
      background-color: #FFFFFF;
      padding: 0px 0 0px 0;
      height:100%;
    }

    .navbar {
        background-color: #000000;
        width: 100%;
        height: 70px;
        padding: 4px 10px 0px 0px;
        border-radius:10px 10px 0px 0px;
     }

    .navbar a {
        color:white;
        font-family: Lato, sans-serif;
        text-align: center;
        padding: 10px 10px;
        text-decoration: none;
        float:right;
        margin-left:-35px;
        font-size: 14px;
        font-weight:bold;
    }
    .fas {
        font-size:26px;
    }    
    .row:after {
      content: "";
      display: table;
      clear: both;
    }

    .col {
          float: left;
          width: 50%;
          height:100%;
          margin: auto;
          margin-top:70px;
          margin-bottom:6px;
          padding-left:5px;
      padding:0;
    }

    .txt {
        font-family:Montserrat, sans-serif;
        font-weight:bold;
        text-align: left;
        font-size:20px;  padding:0;
    }
.txt p{
  padding:0;
}
  <div class="container">

          <div class="navbar">
          <a href="#"><i class="fas fa-user-plus"></i><br>Sign Up</a>
              <a href="#"><i class="fas fa-sign-in-alt"></i><br>Login</a>
          </div>

           <div class="row">
                <div class="col">
                    <div class="txt">
                        <p style="align:justify"><br><br>
                        Education is the process of facilitating learning<br>
                        Acquisition of knowledge<br>
                        Make Informed decision about your future<br>
                        Let's discover opportunities
                        </p>
                    </div>
           </div>
                <div class="col">
                        <img class="img-responsive" src="book.png" width="500" height="400">
                </div>
           </div>
  </div>

is this what u looking for?

1
  • But I need the container to have 50px padding on either sides with respect to the screen (I updated the picture). If I apply the padding properties only to the .container in styles, it won't apply.
    – Charitha Reddy
    Commented May 23, 2019 at 10:30

Not the answer you're looking for? Browse other questions tagged or ask your own question.