Hello everyone, I am making a responsive framework for myself to quickly use in my projects. I got the columns the correct size and all but I have a problem that text will go outside of the column if it's too long. Here is my Css code.
body{background:green;}.row{display:block; width:100%; overflow: auto; margin: 0px 0;}.container{width:1170px;background:white;margin: 0px auto;}.column1,.column2,.column3,.column4,.column5,.column6,.column7,.column8,.column9,.column10,.column11,.column12{margin:10px 1.041667%; float:left; background: #f0f0f0; box-shadow: 0px 0px 1px 1px #e1e1e1; border-radius: 2px; }.column1{width:6.25%; display:block;}.column2{width:14.583333%; display:block; }.column3{width: 22.91667%; display: block;}.column4{width: 31.25%; display: block;}.column5{width: 39.583333%; display: block;}.column6{width: 47.916667%; display: block;}.column7{width: 56.25%; display: block;}.column8{width: 64.583333%; display: block;}.column9{width: 72.916667%; display: block;}.column10{width: 81.25%; display: block;}.column11{width: 89.583333%; display: block;}.column12{width: 97.916667%; display: block;}.text-center{text-align:center;}.text-left{text-align:left;}.text-right{text-align:right;}
and here is an image explaining the problem. As you see, the word columns partially comes out of the actual column itself. On the right is more of the code. Any suggestions?
