Сергей Мельников

насколько я знаю, в убунте есть Arial и Helvetica

попробуй так

font-family:Arial,Helvetica,"Nimbus Sans L", serif;

и посмотрите, что получится

getbootstrap.com/css/#grid-media-queries

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

надо использовать нормальные ide, в phpStorm, например, есть локальная история, у меня подобная ситуация была (выключили свет), так я все из local history вытянул

вот где вы такие неучи беретесь, это незнание основ HTML, читайте книги, смотрите туториалзы для чайников!!!
----------------
что бы блок "поднялся", как вы выражаетесь), нужно ему задать float, либо left, либо right, + он должен быть меньше, чем оставшийся промежуток (в вашем случае - 100% - 22% = 78% или меньше)

можно вывести его за предел wrapa если задать div'у отрицательный margin по сторонам

.somedive {
   margin-left: -100px;
   margin-right: -100px;
}

но пока он внутри wrapa, нельзя задать ему ширину как у экрана (100%).
Тут надо либо div вынести за предел wrap, либо задать ему margin с помощью js

Я так понимаю, ты хочешь что бы за тебя сделали верстку? если ты с html и css не сталкивался, заплати тому, кто сталкивался и пусть он сделает за тебя, иначе учи азы, кури мануалы)

.container {
    		text-align: center;
    	}

    	.container .img {
    		display: inline-block;
    		width: 12%;
    	}

        .container .img img {
		max-width: 100%
	}

<div class="container">
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>

	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>

</div>

задавай размер текста в vh и vw

http://css-tricks.com/viewport-sized-typography/

а ты не пробовал использовать префиксы?

@-webkit-keyframes blinkpulse { }
@-moz-keyframes blinkpulse { }
@keyframes blinkpulse { }

-webkit-animation: ... ;
-moz-animation: ... ;
animation: ... ;

тогда вся анимация у тебя будет кроссбраузерная

.wrapper {
    overflow: hidden;
    height: 150px;
    width: 150px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.wrapper > img {
    max-width: 100%;
    display: inline-block;
}

codio.com

http://getbootstrap.com/examples/sticky-footer/