CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Woltzor
Woltzor

Reputation: 29

Left and Right side container border not the same

I have been working on my business website, over the past week, and yesterday i got into a problem, that i can not find a solution for.

http://multisupport.dk/

As you can see, the left border is difference than the right border, i basicly want the borders, to look the same in both sides ( left & right ).

I have tried everything that i possibly could think of, i have tried to give paddings on the right side, to "check" if the border was hiding behind another container.

I also tried to make border, on all content containers, but that didn't work either.

enter image description here

A wiseman once said, a picture says more than a 1000 words, so here is a picture that explains pretty good what i would apreciate, to get some help with :)

Upvotes: 1

Views: 394

Answers (2)

pingul
pingul

Reputation: 3473

The problem is because of your DOM structure:

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

As you note you have two nested containers. If you look at the css for the container you see that it has the property width: 1200px, which includes any potential borders. As the outer div has a border of 1px, that means that the inner div will have 2 less pixels to work with and the true size should be 1198px.

To solve the problem you could change the static width, but I would suggest against nesting containers, as I do not reckon that is its purpose.

Edit: To make it work with all different display-sizes you could add:

@media (min-width:768px) {
    .second {
        width: 752px;
    }
}

@media (min-width:992px) {
    .second {
        width: 972px;
    }
}

@media (min-width:1200px) {
    .second {
        width: 1202px;
    }
}

Upvotes: 1

wazz
wazz

Reputation: 5068

add this width to the first div:

<body id="page-top">
    <div class="container second" style="width: 972px;">

i haven't figured out the cause exactly but bootstrap's container is:

.container {
    width: 970px;
}

and the nested containers (or edges) are affected.

Upvotes: 1

Related Questions