Reduce width of header CSS

Currently, my header is displaying 100% width.  I want to be able to get it to 75% width so you can see the edges of the header.

This is the mockup i'm trying to achieve.

recreate this header
I've tried for ages messing with the css but cannot get a transparent background.  

Help me please,
Jon ImmsWeb DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David KellyWeb DeveloperCommented:
Do you have a link to the page?

It's nearly impossible to answer a question like this with no HTML/CSS to view or a link to the page.
0
Jon ImmsWeb DeveloperAuthor Commented:
Oops sorry, forgot to add the link Website link
1
Qian BaoDigital Media Specialist and Web DesignerCommented:
Your header is controlled by "container_wrap container_wrap_logo". Try adjusting its padding and margin, as well as height and width. Check to make sure whether the white spaces on either side of the header are supposed to be there. You can't achieve a transparent effect when your header taking up blank spaces with white spaces.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Peter HartCommented:
Its the design.
I don't think the header is  "on top" of the image of trucks
you can see when you scroll the page down the  Header shrinks down and stays there while everything else scrolls over the image.

it may be a setting in the theme's customise section about a sticky header. amd it probably generates its own css file.
if you stop the background being white then the page further down looks wrong and the header still has a white background
0
gobinath rajuCommented:
.container {
width: 75%;
}
0
Juana VillaFront-end DeveloperCommented:
Hello Jon,

Looking at your website, I will do the following:

1. I will create some space at the bottom of "#header_meta" in order to move up the "#header_main" up

#top #header_meta {
    padding-bottom: 80px;
}

#header_main {
    z-index: 10; /*updated from 1 to 10*/
    margin-top: -70px;
}

Open in new window


2. About the transparent stuff: These are the elements who need a transparent background.

.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 112px; /*changed from 168 to 112 */
}
.header_color .header_bg,
#main.all_colors{
    background: transparent; /*override a white background*/
}

Open in new window


I hope this helped you,
Juana
3

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Jon ImmsWeb DeveloperAuthor Commented:
fantastic, thank you.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.