CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
sushibrain
sushibrain

Reputation: 2780

Bootstrap - White border surrounding panel

So I have this website that I'm working on, it involves it's "main" content in a bootstrap panel. The ideal width for that panel is 670px. So what I do is that I create a parent which is width: 670px. This is my output:

enter image description here

What annoys me so much is that big block of white at the right. How to solve that issue so that it'll dissapear?

This is the HTML I'm using:

<div class="  panel_big">
                <div class="panel_top_orange">
  <i class="fa fa-home"></i>
                    <span>Welkom!</span>
                </div>
                <div class="panel-body">
                    Lorem ipsum
                </div>

                            </div>

And my CSS:

.panel_big {
        overflow: hidden !important; 
            border: 3.5px solid rgba(213, 220, 226, 0.9) !important;
            width:  670px;
    }

So how do I remove this whitespace? I already tried overriding the bootstrap settings by giving the panel a width of 670 pixels, but the space was still there...

Thanks.

Upvotes: 0

Views: 1758

Answers (2)

Dariusz Sikorski
Dariusz Sikorski

Reputation: 4407

You need to center position of .panel_big by using margin: auto and better use width: 100% with max-width of 670px, when browser width will be smaller than 670px .panel_big will start to fit its width to browser width. Here's the code:

.panel_big {
  overflow: hidden !important; 
  border: 3.5px solid rgba(213, 220, 226, 0.9) !important;

  /* added code */
  width:  100%;
  max-width: 670px;
  margin: auto;
}

Upvotes: 0

Adeel Ahmad
Adeel Ahmad

Reputation: 305

Place everything inside this div 

<div class="container">
...
<div>

If you are using bootstarp.

Upvotes: 2

Related Questions