Styjun

So, I have to create this Page where in you get text alongside image displayed as seen in here

But , on minimising the window size the image gets overlapped as seen here

 <div class="header1">
 <div class="col-md-8">
 <h4 class="hedtext">Name</h4>
 </br>
 <h4 class="hedtext">Address</h4>
 </br>
 <h4 class="hedtext">Contact Number</h4>
 </br>
 <h4 class="hedtext">Fax</h4>
 </div>
 <div class="col-md-4">
 <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="pull-right img1">
 </div>
</div> 

and Here is the css

.hedtext 
padding-top:10px;
margin-bottom: -19px;
line-height: 2pt; 
font-size: 13px;
font-weight: 750;
float: left;


.header1 
 border: 1px solid black;
 height: 150px;
 

.img1 
width: auto;
height: 130px;
padding :10px;

Also, using bootstrap 3 . All i want is that the image goes side by side the text on minimising the window size .

First you have forgot to add the .row class div which bootstrap requires to wrap around the columns to work correctly.

I removed .pull-right and instead just added text-right to the column. You can also use floats though or whatever to set the image to the right side however you wish.

<div class="header1 row">
 <div class="col-md-8">
 <h4 class="hedtext">Name</h4>
 </br>
 <h4 class="hedtext">Address</h4>
 </br>
 <h4 class="hedtext">Contact Number</h4>
 </br>
 <h4 class="hedtext">Fax</h4>
 </div>
 <div class="col-md-4 text-right">
 <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
 class="img1">
 </div>
</div>

1. You have to wrap col in row
   


2. Remove the .hedtext - float (bootstrap worry about float)


3. Remove .header1 height: 130px; (It the reason image out of border)

See working code

.hedtext 
 line-height: 2pt;
 font-size: 13px;
 font-weight: 750;

.row 
 border: 1px solid black;


.img1 
 width: auto;
 height: 130px;
 padding: 10px;

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
 <div class="row">
 <div class="col-md-8">
 <h4 class="hedtext">Name</h4>
 <h4 class="hedtext">Address</h4>
 <h4 class="hedtext">Contact Number</h4>
 <h4 class="hedtext">Fax</h4>
 </div>
 <div class="col-md-4">
 <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="img1">
 </div>
</div>
</div>

you have to add responsive class in div like col-xs-* for responsive

do this for your solution

<div clss="row">
 <div class="header1">
 <div class="col-md-8 col-xs-8">
 <h4 class="hedtext">Name</h4>
 </br>
 <h4 class="hedtext">Address</h4>
 </br>
 <h4 class="hedtext">Contact Number</h4>
 </br>
 <h4 class="hedtext">Fax</h4>
 </div>
 <div class="col-md-4 col-xs-4">
 <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
 class="pull-right img1">
 </div>
 </div>
</div>