CSS Layout. Can not get idea how to fix it


Tags: html,css

Problem :

Currently I'm working on a website, which was done by a freelancer some time ago. I can not hire him again and I decided to make changes by myself. here is the website:
Site
I need to add a page to the website. It's quite a simple task, but when I'm trying to make menu item "Sourcing & Promotional products", it begins to look in the following way:
http://clip2net.com/s/3o7Vef3
I can't attach image to the low rating. I have no idea about how can I fix it. Maybe you can suggest something. The css for this item is:

 background-attachment: scroll;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: none;
background-origin: padding-box;
background-size: auto;
border-bottom-color: rgb(48, 48, 48);
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(48, 48, 48);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(48, 48, 48);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(48, 48, 48);
border-top-style: solid;
border-top-width: 1px;
color: rgb(48, 48, 48);
cursor: pointer;
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 45px;
line-height: 45px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline-color: rgb(48, 48, 48);
outline-style: none;
outline-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 178px;
padding-top: 0px;
text-align: left;
text-decoration: none;
vertical-align: baseline;
width: 0px;


Solution :

#navi ul li a {
    border-top: 1px solid #303030;
    cursor: pointer;
    color: #303030;
    -> change this: width: 178px;
    display: inline-block;
    height: 45px;
    text-decoration: none;
    font: 12px/45px "Open Sans",sans-serif;
    -> remove: padding: 0px 178px 0px 0px;
}

Your designer did some weird stuff He made the width 0px; This way, every letter would go on a new line. And he made the padding on the left side 178px -_-. Just remove the padding and make the width 178px

the arrows indicate what needed to be changed


    CSS Howto..

    HTML/CSS: flip3d how to do a 360 degrees with 4 pictures

    How to overlay a form field over an image with a fixed width?

    how to verify “Cache-Control”, “no-cache, no-store, must-revalidate”

    CSS: Adding border to button on hover. How avoiding a shifting of the following elements? [duplicate]

    How to store a global variable in JQuery?

    How i can force my div to display in block?

    How to insert CSS code into a page if I can't insert it into head tag? Only inline mode?

    How can I fill in the background behind text when I hover over it in a nav bar? [HTML/CSS]

    How to do page / content transitions

    How to increase width of Bootstrap container on Max width?

    How to vertically align the text into a coloured div using CSS?

    How do I fix an HTML panel to the page after it hits the top of the viewport?

    How to keep banner animations running while changing webpages [closed]

    CSS how to make a fixed height?

    How to Vertically Center Images on a Line?

    How to keep control-specific css with the control code (ASP.NET)

    CSS: How to break images into rows?

    How do I center these three blocks horizontally?

    Navigation Bar - Each button is at a seperate line, how do I fix that?

    How come bootstrap.min.css looks like commented

    How can I get horizontal overflows to work in CSS?

    How to use CSS import in Liferay? CSS fast load works bad

    How to change background color of readonly textbox in css

    Using only CSS, show div on hover over

    How to use Jekyll baseurl in css files

    CSS: How to change font-size of something that already has “font-size: 0.9em !important” on it [duplicate]

    How to use relative referencing in CSS files

    How to print text between css selectors in golang using html package?

    ASP.NET DataBoundField DataFormatString, how can I add html correctly?

    How to reset css before repeating sequence