Cool Zombie Outbreak

<div id="marquee">
<div><span>STAY INDOORS: ZOMBIE OUTBREAK</span></div>
<div><span>STAY INDOORS: ZOMBIE OUTBREAK</span></div>
</div>
<form onsubmit="setText(event)"><label for="textsource">Source text</label> <input id="textsource" title="Text must be 5 to 30 characters in length" pattern=".{5,30}" type="text" value="STAY INDOORS: ZOMBIE OUTBREAK" /> <input type="submit" value="Use" /></form>
<script type="text/javascript" xml="space">// <![CDATA[
function setText(event){
  event.preventDefault();
  leftText.innerText = textsource.value.toUpperCase();
  rightText.innerText = textsource.value.toUpperCase();
}
var leftText = document.querySelector("#marquee div:first-of-type span");
var rightText = document.querySelector("#marquee div:last-of-type span");
var textsource = document.getElementById("textsource");
setText();
// ]]></script>

#marquee {
	margin-top: 3rem;
	perspective: 500px;
	font-size: 0;
	font-family: Agency, sans-serif;
}
#marquee div {
	display: inline-block;
	height: 12rem;
	width: 30rem;
	position: relative;
}
#marquee div:first-of-type {
	background: #e5233e;
	transform-origin: top right;
	transform: rotateY(-40deg);
	color: #fff;
}
#marquee div:last-of-type {
	background: #b31e31;
	transform-origin: top left;
	transform: rotateY(45deg);
	color: #f8c9d9;
}
#marquee div {
	font-size: 8rem;
	overflow: hidden;
}
#marquee div span {
	position: absolute;
	width: 400%;
	line-height: 1.4;
}
@keyframes leftcrawl {
	to {
		transform: translateX(-100rem);
	}
}
@keyframes rightcrawl {
	to {
		transform: translateX(-130rem);
	}
}
#marquee div:first-of-type span {
	transform: translateX(60rem);
	animation: leftcrawl 14s linear infinite;
	text-shadow: 4px 0px 4px rgba(0, 0, 0, 0.3);
}
#marquee div:last-of-type span {
	transform: translateX(30rem);
	animation: rightcrawl 14s linear infinite;
}
#marquee form {
	margin-top: 3rem;
	background: #334;
	padding: 1rem;
	text-align: center;
	color: #fff;
}
#marquee input[type="text"] {
	padding: .5rem;
	font-size: 1.2rem;
	width: 22rem;
}
#marquee input[type="text"] {
	padding: .5rem;
}
l#marquee label {
	margin: 1rem;
}
@media all and (max-width: 993px) {
	#marquee {
		perspective: none;
	}
	#marquee div:last-of-type {
		opacity: 0;
		height: 0;
	}
	#marquee div:first-of-type {
		width: 80%;
	}
}
 

К примеру мы имеем такой список ul li

<ol>
    <li>Москва</li>
    <li>Вильнюс</li>
    <li>Хьюстон</li>
    <li>Буратино</li>
    <li>Гротеск</li>
</ol>
<ol>
    <li>Америка</li>
    <li>Китай</li>
    <li>Индия</li>
    <li>Таиланд</li>
    <li>Украина</li>
</ol>

 Javascript

// прописываем необходимые буквы в переменную
var letters = "абвгдежзиклмнопрстуфхцчшщэюя";
$.each($('ol'), function() {
    var item = $(this).find('li');
    item.each(function(i){
        $(this).attr("russ", letters[i] + ")");
    });
});

 Прописываем стиль

ol {
  list-style-type: none;
}
ol > li::before {
  display: inline-block;
  content: attr(russ);
  width: 1.2rem;
  margin-left: -2rem;
}

The default Bootstrap grid system utilizes 12 columns with each span having 30px gutter as below. Gutters are the white space between columns. Gutter width seems to be between 20px - 30px. Let's assume it's 30px here.

For example  - you want to remove gutter space for a specific div only. Let's assume that it's for div which are in the main_content div.

div#main_content div{
  /*
 no gutter for the divs in main_content
 */}

How you can remove the gutter for a specific div without loosing bootstrap responsiveness and not leaving space at the end of the row?

Do you want to make a font like on a Mac? Then you need to write this style:

* {
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    text-rendering: optimizelegibility;
}