Why isn't my full image appearing?

In the index page towards the bottom I have two images in two containers. But the full image dosnt appear. How would I make the containers wider so both images appear properly.

Here is the link.
http://rahmankhaliq.com/index.html

 

The images are too wide to show them side by side in their real size. You will have to make them responsive first.

What you need to do is add width="100%" to both of the image links:

<img src="images/suhayb.jpeg" width="100%" alt="Iram Family">

<img src="images/iram.jpeg" width="100%" alt="Iram Family">

The images will become responsive. Then increase .cols to a desired width where the image are not looking too small. As an example, change

.cols {
width: 471px;
}

to

.cols {
width: 550px;
}

 

Thank you, I have made the changes but where would I put the center code so the both containers can be centered. please see site again.

 

Try this. Change this:

.cols {
width: 800px;
}

to

.cols {
width: 800px;
display: block;
margin: 0 auto 0 auto;
}

Then remove float: left from:

.col1, .col2, .col3, .cols {
float: left;
}

 

Thank you so much this worked.

 

By the way, set pad_left1 and pad_left2 to 0:

Change:

.pad_left1 {
padding-left: 6px;
}

to:

.pad_left1 {
padding-left: 0;
}

=============

.pad_left2 {
padding-left: 18px;
}

to:

.pad_left2 {
padding-left: 0;
}

That way your containers will be perfectly centered.