How to set default page dimension in CSS? - html

Question

I'm trying converting my Photoshop design into a web site, manually writing HTML and CSS. It's my first time doing this type of exercise, so I'm having a little problem from the get-go with page dimensions.
I did my PS design using a 1920px page width, this is the fullscreen result. Writing CSS, I set header width to 1920px and logo width to 150px (as in the PS file). But I obtain this (don't worry about logo position).
As you can see, the page is very "zoomed in" and the scrollbar appears down below. I want to display the whole page without a scrollbar, just as in PS, keeping the same ratio between elements.
This is my HTML & CSS code for the header:
#logo img {
float: left;
width: 150px;
height: 150px;
}
#header {
position: absolute;
top: 0px;
left: 0px;
width: 1920px;
/* I also tried width: 100% */
height: 100px;
background: #000000;
}
<div id="header">
<div id="logo">
<img src="..\codice\export\logo.png" alt="logo">
</div>
</div>
As shown in the code, I also tried setting the header's width to 100% but this way the logo proportion (150 px / 1920 px) was not respected.
How can I write in CSS: "1920 should be your 100% when visualizing the page with the browser"?
I'm sorry if this is a silly question but it's my first time working with these tools.

Answer 1

I made this jsfiddle
You can check with a fluid width: 100% you should not have this horizontally scrollbar
Then i added a header_content div with a fixed width of 520px (then you can see it is centered and well placed. but you will need to change that value according to your photoshop header width.
Note : css margin:0 auto makes your div centered horizontally.

Answer 2

Some additional HTML and CSS may solve the problem for you! And I'm considering you have to add the menu which you not yet done. Here is my solution. I put some helpful comment that you help you to understand the code properly. You can have same code at my codepen example.
body {
padding-top: 150px;
/* if you don't add this your code will be hidden under the #heade */
}
#logo img {
float: left;
width: 150px;
height: 150px;
}
#header {
position: absolute;
top: 0;
/*No need to add 'px' when the value is 0 */
left: 0;
/* I also tried width: 100% */
right: 0;
/*Thsi will cover the right side. So no need to declear a width*/
/* logo has some space at to so we are adding a padding at top*/
padding-top: 25px;
height: 75px;
/* reduce to 75px so header will be just half of the logo image*/
background: #000000;
}
.container {
width: 1170px;
/* hae to make this responsive for smallar devices*/
box-sizing: border-box;
margin: 0 auto;
}
.navigation {
float: right
}
/*Eacaping the proper code for the navigation so here is some face code */
.navigation {
color: #fff;
}
<div id="header">
<div class="container">
<div id="logo">
<img src="http://www.logospng.com/images/22/itunes-12-logopng-wikimedia-commons-22786.png" alt="logo">
</div>
<nav class="navigation">
Home Link1 link2 ecc
<!-- I escaping the coding of nav here -->
</nav>
</div>
</div>