I was trying to use the css property of text-align:justify to make my site responsive. It is explained in detail in this article.
<http://www.barrelny.com/blog/text-align-justify-and-rwd/>

I have a small problem though. I need to make my surrounding borders overlap for listitems, even after browser resize. Kindly help if possible.

<http://jsfiddle.net/aAkAK/>

Html:

```
<div id="menu_wrap">
     <ul>
        <li><a href="index3.php">HOME</a></li>
        <li><a href="about.php">ABOUT US</a></li>
        <li><a href="safety.php">SAFETY</a></li>
        <li><a href="careers.php">CAREERS</a></li>         
        <li><a href="contact.php">CONTACT US</a></li>
        <li class="break"></li>
     </ul> 
</div> <!-- end of menu_wrap -->

```

CSS:

```
#menu_wrap{
    background: #a0a0a0;
}

#menu_wrap ul {
    text-align: justify;
}

.break {
    width: 100%;
    height: 0px;
}

#menu_wrap ul li {
    display: inline;
    border-left: 2px solid #a60000;
    border-right: 2px solid #a60000;
}

#menu_wrap ul li a {
    padding:0 1em;
}

```

![enter image description here](https://i.stack.imgur.com/M83sa.png)