Take the 2-minute tour ×

I'm simply trying to make the width of a container a percentage instead of the Bootstrap default 940px.

My CSS in main.css:

<style type=text/css>
        width: 200px !important;


<link rel="stylesheet" type=text/css href="/static/css/bootstrap.css">
<script type=text/javascript src="/static/js/bootstrap.js"></script>
<!--custom css-->
<link rel="stylesheet" type=text/css href="/static/css/main.css">

<div class="container" id="main-container">
  <div class="row-fluid">
    <div class="span12">
      {% block body %}{% endblock %}

I'm able to change the width with a dirty method of modifying the style manually at the 7th line in the HTML. So my guess is that something is taking precedence over my CSS.

Bootstrap itself doesn't seem to specify an !important width.

At line 224 in bootstrap.css:

.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
  width: 940px;


Removed tags in main.css.

share|improve this question
Does bootstrap have !important on the width of #main-container too? –  Trevan Hetzel Dec 18 '12 at 4:54
@Trevan, Added more details. –  Aaron Reba Dec 18 '12 at 4:56
Where is the custom style embeded? In the html file, or in the main.css file? –  Luigi Dec 18 '12 at 5:03
If embedded means where is the <style> defined for #main-container, it's in main.css. –  Aaron Reba Dec 18 '12 at 5:06
Then throw out the <style> tag. You shouldn't put them in css files. Just use them when ebmeding css code directly in html files. –  Luigi Dec 18 '12 at 5:07
show 2 more comments

2 Answers

up vote 1 down vote accepted

Remove <style> tag from css file. Put those only when embeding css in html files.

share|improve this answer
add comment

Then specifically give .container an !important width of 200px. Narrow it down as much as you can.

share|improve this answer
Like "#main-container.container{ width: 200px !important; }"? –  Aaron Reba Dec 18 '12 at 4:59
Ah @Luigi has it. I didn't realize you were actually putting <style> tags inside your css file. But to answer your question above, #main-container.container would target an element with a class of "container" INSIDE an element with an id of "main-container". So you would have just done .container {width: 200px !important;} –  Trevan Hetzel Dec 18 '12 at 5:27
add comment

Your Answer


