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.
<br>
tags to start with<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.