Hello,
I am stuck on this. I know is repetitive and I apologize for it. But I have my CSS file and I get this error when running the test, and to be honest, I can not find what I am missing.
body {
background-color: #3375a1;
}
.main-header {
margin-left: 330px;
padding: 20px;
text-align: center;
color: #0c0cad;
font-variant-caps: small-caps;
font-size: 18px;
border: 3px solid black;
background-color: #ffffff;
}
#navbar {
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: 250px;
padding: 0;
background-color: #ffffff;
border-right: 2px solid #ccc;
z-index: 10;
overflow-y: auto;
}
.nav-link {
display: block;
margin: 5px 0;
padding-left: 20px;
color: #0c0cad;
text-decoration: none;
}
.nav-link:hover {
text-decoration: underline;
}
#main-doc {
margin-left: 250px;
padding: 20px;
overflow: auto;
}
.main-section {
margin-bottom: 20px;
}
.main-section header {
font-family: "Courier New", Courier, monospace;
font-weight: 100;
font-size: 20px;
margin-bottom: 10px;
color: #f0f0f0;
}
/* Media Queries */
/* For tablets and small desktops (min-width: 600px and max-width: 900px) */
@media (min-width: 600px) and (max-width: 900px) {
#navbar {
width: 180px;
}
#main-doc {
margin-left: 180px;
}
}
/* For mobile devices (max-width: 600px) */
@media (max-width: 600px) {
#navbar {
width: 100%;
height: auto;
position: relative;
margin: 0;
}
.main-header {
margin-left: 0;
padding: 10px;
}
#main-doc {
margin-left: 0;
padding: 10px;
}
#navbar img {
display: none;
}
}
Gracias for any help or retro that can be provided.
Happy coding
Hello and Welcome to the forum @arturomrivas !
Without seeing the html code it may be difficult to assist completely.
Just viewing the provided CSS code, I am wondering if the .main-header margin-left could be the problem. You could try removing it or lowering the value to see.
Please provide your html on this post by place three ``` back ticks before the code and after the end of the code?
Thank you!
Wishing you good progress on your coding journey. 
1 Like
please share the HTML too.
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
1 Like
Gracias,
This is my html code
<!DOCTYPE html>
<html lang="en">
<!--Head (encabezado) of the browser (at the very top); title is for the content (always text) in it-->
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css" />
<title>Tech Doc FCC</title>
</head>
<body>
<header class="main-header">
<h1>My old web dev computer with Fedora 40 workstation</h1>
<nav id="navbar">
<header>
Optiplex 3050 Intel Core i5-6500, 32 GB Ram, 4 GB ATI Radeon RX 550,
Intel wireless & bluetooth card AX210
</header>
<a class="nav-link" href="#Dell_Optiplex_3050">Dell optiplex 3050</a>
<a class="nav-link" href="#CPU_Core_i5_6500">CPU Core i5 6500</a>
<a class="nav-link" href="#Ram_Memory">Ram Memory</a>
<a class="nav-link" href="#Graphic_Card">Graphic Card</a>
<a class="nav-link" href="#Wireless_NIC">Wireless NIC</a>
<img
id="navbar-image"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQMa0FHNVrgGrF2K1h-yzLSFsgBla7rHB-xQ&s"
/>
</nav>
</header>
<main id="main-doc">
<section class="main-section" id="Dell_Optiplex_3050">
<header>Dell optiplex 3050</header>
<p>
This computer was built in 2017 as a workstation, known for its
reliability and performance in office and light development tasks.
</p>
<p>
It includes a PCIe slot for upgrading with a GPU and offers a compact
design ideal for small workspaces.
</p>
<code
>Year: 2017<br />Form Factor: Small Form Factor<br />PCIe Slots: 1
(used for GPU)</code
>
</section>
<section class="main-section" id="CPU_Core_i5_6500">
<header>CPU Core i5 6500</header>
<p>
The Intel Core i5-6500 is a 6th generation quad-core processor based
on the Skylake architecture. It has a base clock speed of 3.2 GHz and
a turbo boost up to 3.6 GHz.
</p>
<p>
It supports DDR4 memory and is great for multitasking and everyday
tasks.
</p>
<code
>Base Frequency: 3.2 GHz<br />Max Turbo Frequency: 3.6 GHz<br />Cores:
4<br />Threads: 4<br />TDP: 65W</code
>
<ul>
<li>Generation: 6th (Skylake)</li>
<li>Socket Type: LGA 1151</li>
<li>Integrated Graphics: Intel HD Graphics 530</li>
<li>Max Memory Size: 64 GB</li>
<li>Supported Memory Types: DDR4, DDR3L</li>
<li>Max Memory Bandwidth: 34.1 GB/s</li>
<li>Thermal Solution Specification: PCG 2015C (65W TDP)</li>
</ul>
</section>
<section class="main-section" id="Ram_Memory">
<header>Ram Memory</header>
<p>
The system has 32 GB of DDR4 RAM, which provides excellent
multitasking capabilities. It's more than enough for most development
and professional tasks.
</p>
<p>
Having such a large amount of RAM ensures that multiple applications
and processes can run smoothly without bottlenecks.
</p>
<code>Type: DDR4<br />Capacity: 32 GB<br />Speed: 2133 MHz</code>
</section>
<section class="main-section" id="Graphic_Card">
<header>Graphic Card</header>
<p>
The ATI Radeon RX 550 is a budget-friendly GPU that is great for
handling multimedia tasks, light gaming, and offering improved
performance for graphical applications.
</p>
<p>
With 4 GB of VRAM, it's capable of handling tasks that require some
GPU acceleration, such as video rendering or image processing.
</p>
<code
>VRAM: 4 GB GDDR5<br />Architecture: Polaris 12<br />Outputs: HDMI,
DVI</code
>
</section>
<section class="main-section" id="Wireless_NIC">
<header>Wireless NIC</header>
<p>
The Intel AX210 wireless and Bluetooth card provides modern wireless
connectivity with support for Wi-Fi 6 and Bluetooth 5.2.
</p>
<p>
This NIC card is great for faster internet speeds, improved range, and
better connectivity with wireless peripherals.
</p>
<code
>Wi-Fi: 802.11ax (Wi-Fi 6)<br />Bluetooth: 5.2<br />Max Speed: 2.4
Gbps</code
>
</section>
</main>
</body>
</html>
1 Like
Thank you for submitting it for the community to better assist you, @arturomrivas
Perhaps adding the .main-header width to cover the full width, and adding a position of fixed for it, may work.
along with my previous suggestion to remove the margin-left from it.
Wishing you good progress on your coding journey.
1 Like
I will do it to see if it changes anything, as soon as I get back home. (I came to pick up the wifey from her work)
1 Like
That sounds very good. If you still have problems, just let us know on this post please?
Keep up the good progress! 
1 Like
@Created-Unique Thanks. I did the .main-header change but it did not work, the width modification, so I undid it and just added the position: fixed; and this did the trick. Now I have to understand “why” lmbo.
Muchas gracias
1 Like
Glad to hear it worked.
I think by adding the position to the header may have worked because it is the parent for the navbar, which helped it to stay where it was supposed to me. Otherwise, it could be moved out of place, and because the navbar is located on it, that would automatically shift out of place, too.
Keep up the great progress, and wishing you much success on your coding journey.
1 Like
