Currently, I am in the process of building a website on my laptop while following an instructor's video tutorial. It has been important for me to set the same pixel measurements as the instructor in order to replicate the design they provided. However, I have run into an issue where the design only looks proper when my browser is zoomed to 90%. If I zoom in to 100%, the content begins to overflow and the items do not display correctly. Interestingly, other websites that I view online seem to work perfectly fine at 100% zoom. Here are some details of what I have already implemented:
- Set body margin to 0.
- Ensure all section background sizes cover or take up 100% of the screen.
If there are specific additional details that I should address, please feel free to let me know. Thank you in advance.
body{
margin: 0;
font-family: "SourceSansPro", serif;
}
@media (min-width: 1280px) {
.container {
width: 1360px;
}
header {
height: 745px;
padding-bottom: 90px;
}
<html>
<head>
<link href="app2.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<div class="container">