Web page isn't getting responsive

I want to make my web page responsive. It works till 320px, but when I reduce the size of the screen furthermore, it doesn't work at all, and only half of the content gets visible.

Here's the required code

HTML:

          <div class="col-md-6"><img src="assets/img/profile.png" height="520" width="500" hspace="20"  class="responsive" >  
          </div> 
          <div class="col-md-6"> 
             <p>Lorem Khaled Ipsum is a major key to success. To succeed you must believe. When you believe, you will succeed. Mogul talk. Find peace, life is like a water fall, you’ve gotta flow. Lion! Fan luv. Eliptical talk. </p> 
             </div>  

    </div>

CSS:

.responsive {
max-width: 100%; 
display:block; 
height: auto;
margin: auto; 
 } 

img {
  float: left;
   margin-left: 20px; 
 }

    @media screen and (max-width: 768px) { 
.nav-menu {
    background-color: #ffffff; 
}

.nav-toggle:hover {
    background-color: transparent;
}

.nav-toggle span {
    background-color: #dfdfdf;
}

.nav-toggle span:hover {
    background-color: #fff;
}


   } 

Thanks in advance!