how to set margin or padding 0px between column?

Question

I am trying to develop simple application as show in image [![enter image description here][1]][1]

But I am facing few issues in that

• Actually using padding:0px and margin:0px remove the space between the columns .But first column and last column have some margin .In other first column and last column have few margin left .but I need it should collide with super div as shown in image.
• how to show check box on right top of each columns ?I am able to show icon but it have two issue one it is black second it is showing left side .
• how to text horizontally center as shown in image or wrap the text having equal margin at right and left ? .I am not getting the text horizontally center . here is my plunker

http://plnkr.co/edit/kEplF4kXjIkRRmxNzsVb?p=preview

Please check code using preview button (full screen) .

.answer_div .col{
  padding:0px;
  margin:0px;
}

Answer 1

To make text to center

.answer_block{
  border:1px solid grey;
  padding:20px; //added this
  width:100%;
  height:150px;
  background-color:lightgrey;

}

To make check mark right and color white use this

.ion-checkmark
{
  color:white;
  font-size: 16px;
  float:right;
}

Answer 2

There is a padding on the "row" css class. That's why your outer columns are spaced to the inside - the padding is not on the columns (you removed that correctly), it's on the outer div having the "row" class.

For the check mark, you can use a float to get it to the right side.

For centering the text, please just type it into Google. Hit 1 already did it for me.