Podkreślenie nagłówka bez podkreślania ikonki

Mam problem z podkreśleniem nagłówka, otóż chciałbym, aby podkreślony był tylko tekst, oczywiście bez zmiany położenia ikonki. Problem wydaje się być błahy, ale i tak nie potrafię sobie z nim poradzić. Zamieszczam oczywiście kod, jak i podgląd na żywo.

HTML:

<div class="header-container">
    
    <div class="icon-bg pull-left">
        <i class="fa fa-info"></i>
    </div>
    
    <h3 class="title-header"><span>Tytuł - coś tutaj będzie</span></h3>
    
</div><!-- /header-container -->
    

CSS:

.header-container {
}

.title-header {
	border-bottom: 4px solid #ddd;
}

.title-header span {
	border-bottom: 4px solid #e02222;
}

/* tlo dla ikonki */
.icon-bg {
	width: 30px;
	height: 30px;
	border-radius: 15px;
	background-color: #e02222;
	color: #fff;
	font-size: 14px;
	text-align: center;
	margin-right: 5px;
	margin-top: -5px;
}

/* wycentrowanie ikonki */
.icon-bg .fa {
	margin-top: 8px;
}

JSFiddle: http://jsfiddle.net/mdD7L/1/

No tak działać działa, tylko co masz na myśli pisząc, że nie jest to dobre rozwiązanie? Mógłbyś napisać coś więcej na ten temat?

No tak działać działa, tylko co masz na myśli pisząc, że nie jest to dobre rozwiązanie? Mógłbyś napisać coś więcej na ten temat?

Nie jest to złe rozwiązanie, ale wydaje mi się, że można to zrobić w lepszy sposób bez marginesów. Ja wychodzę z założenia, że im mniej takich "siłowych" rozwiązań tym lepiej.

Zastanawiam się właśnie jak to inaczej ogarnąć i nic innego nie przychodzi mi do głowy. Może ktoś inny coś dorzuci od siebie, albo mnie jutro oświeci

Spoko, dzięki za tymczasowe rozwiązanie. Oczywiście popróbuję jeszcze też jakoś to rozwiązać i jak mi się uda to zamieszczę rozwiązanie. Tak czy siak, jak ktoś inny wpadnie na pomysł, to proszę pisać. Prosta rzecz, a tyle główkowania, hehe.

Spoko, dzięki za tymczasowe rozwiązanie. Oczywiście popróbuję jeszcze też jakoś to rozwiązać i jak mi się uda to zamieszczę rozwiązanie. Tak czy siak, jak ktoś inny wpadnie na pomysł, to proszę pisać. Prosta rzecz, a tyle główkowania, hehe.

Problem nie leży w rozwiązaniu, bo tych jest kilka. Problem leży w optymalnym rozwiązaniu Przy stronach na bootstrapie, gdzie myślimy o RWD nie ma miejsca na boby

Ej nie czaję na JSFiddle przecież jest tylko tekst podkreślony, więc o co cho?

Chodzi o to żeby pod samą ikonką nie było podkreślenia?

Jeżeli tak to margin-left jest tutaj najlepszym rozwiązaniem. Można by kombinować jeszcze z floatami lub display:inline-block, ale wtedy pojawią się problemy że ten nagłówek nie będzie na całą szerokość strony etc.

Ej nie czaję na JSFiddle przecież jest tylko tekst podkreślony, więc o co cho?

Chodzi o to żeby pod samą ikonką nie było podkreślenia?

Jeżeli tak to margin-left jest tutaj najlepszym rozwiązaniem. Można by kombinować jeszcze z floatami lub display:inline-block, ale wtedy pojawią się problemy że ten nagłówek nie będzie na całą szerokość strony etc.

Też na początku nie skumałem
Skoro mówisz, że zostajemy przy lewym marginesie, to Ci wierzę

Temat pewnie został wyczerpany, więc można zamknąć. Dzięki wielkie za zainteresowanie no i dosyć szybką pomoc.

Zamykam na prośbę autora. W razie jakichkolwiek problemów proszę założyć nowy temat.