It seems there are features in css that aren’t being recognized in visual studio code, but everything seems to be working perfect in the website, specifically for the navbar links, the supplement facts image div, and the form div, they seem to be out of place and the margin values i try applying in vscode doesn’t work but they do in freecodecamp.:
I’m assuming you have the link element in the HTML to import the styles.css file since you say it works in FCC. Do you have a file called styles.css on your computer with the CSS in it and is in the same directory as the html file?
Well, first off, extra } in the code as shown below:
but aside from that, it isn’t VSCode that translates your code into a website, its your browser. So if the text is the same in VSCode, then it should display the same if you’re using the same browser.
Like mentioned above, making sure your resources are available is key. Font availability may also be a factor if the fonts are different. Its also possible that the FCC site formats a little differently but it shouldn’t vary by much.
Could you tell us exactly which margin you think isn’t lining up correctly? A screenshot with the problem area circled would help too. Also could you share your HTML code as well, as the links you have could affect things.
Thanks for reading, my issues are the following (im opening both live server and freecodecamp in the same browser and monitor so the values shouldnt change)
1st. the navigation links should be at the right corner of the navigation bar, with both left and right margins of 100px, but they are showing at the left side without any margin at both sides.
Also if you look at the top left corner there 2 logos that collide with each other, in this picture you can see how the navbar should look like:
This formula hits various vectors to address suboptimal nutrient and mineral intake, insufficient gonadotropin output, steroidogenesis in the testis, binding protein interactions, and even stress management to support a more conducive state to maxed out natural Testosterone output.
Far too many people jump the gun and begin to administer exogenous hormones before exploring all the ways they could support their endocrine system via the basics like sleep hygiene, diet, exercise, stress reduction, etc.
For a deep dive into the formula, check out Derek’s 2+ hour breakdown (with timestamps in the pinned comment), where he talks with Andrew Huberman, dissects the clinical studies, efficacy data, side effect profiles, and provides a comprehensive overview of who this formula is best suited for and what to expect from it:
This product is not a substitute for those basics in any capacity, but it can be a potent adjunct to help support higher Testosterone levels and overall fertility metrics.
Suggested Use
For best results, take two (2) to four (4) capsules spread throughout the day. DO NOT exceed four (4) capsules in any 24 hour period. Sigma Testosterone Booster* should be cycled. Take daily for 1 month then take at least 1 week off before resuming use.
Could you edit your above post, but make sure to put your shared code in between ``` quotes? Those aren’t single quotes, but rather the backtick under the ~. It should be like this:
``` <your code here> ```
That way it formats it as code instead of translating it as HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="styles.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abel&family=Alumni+Sans+Pinstripe&display=swap" rel="stylesheet">
<title>Product landing page</title>
</head>
<body>
<header id="header">
<img src="https://static.wixstatic.com/media/af0ade_3c64c2c4a2d2480e95fb0044aaeb740e~mv2.jpeg/v1/crop/x_0,y_77,w_2100,h_710/fill/w_560,h_190,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Gorilla%20Logo.jpeg" id="header-img">
<div id="navbar">
<nav id="nav-bar">
<img id="nav-img" src="https://d3k81ch9hvuctc.cloudfront.net/company/VU3THZ/images/7ea510cd-3c01-4a92-93ac-690d2c465b51.png">
<div id="navlinks">
<a class="nav-link" href="#des">Description</a>
<a class="nav-link" href="#Benefits">Benefits</a>
<a class="nav-link" href="#supfacts">Supplement Facts</a>
<a class="nav-link" href="#Suggested_use">Suggested Use</a>
</nav>
</div>
<div id="descriptiondiv">
<div id="des">
<h1 id="Description" class="subtitle">Description</h1>
<ul>
<li>Higher Testosterone And Free Testosterone Levels</li>
<li>Only Costs ~$10-20 Per Month</li>
<li>Each Bottle Lasts For 2.5-5 Months</li>
<li>Key Bioavailable Nutrients And Minerals</li>
<li>Enhanced Gonadotropin Production</li>
<li>Steroidogenesis Support</li>
<li>Binding Protein Modulation</li>
<li>Stress Management</li>
</ul>
</div>
<div id="bottle">
<img id="bottle-img" src="https://cdn.shopify.com/s/files/1/0369/2580/0493/products/Bit-Bigger-Gorilla-Mind-Sigma-Front-v3.png?v=1650364330&width=1200">
</div>
</div>
<div id="Benefits">
<h1 class="subtitle">Benefits</h1>
<p class="text">This formula hits various vectors to address suboptimal nutrient and mineral intake, insufficient gonadotropin output, steroidogenesis in the testis, binding protein interactions, and even stress management to support a more conducive state to maxed out natural Testosterone output.
Far too many people jump the gun and begin to administer exogenous hormones before exploring all the ways they could support their endocrine system via the basics like sleep hygiene, diet, exercise, stress reduction, etc.
For a deep dive into the formula, check out Derek’s 2+ hour breakdown (with timestamps in the pinned comment), where he talks with Andrew Huberman, dissects the clinical studies, efficacy data, side effect profiles, and provides a comprehensive overview of who this formula is best suited for and what to expect from it:</p>
<div id="videodiv">
<iframe width="560" id="video" height="315" src="https://www.youtube.com/embed/mzqI0XEoWes" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<p class="text">This product is not a substitute for those basics in any capacity, but it can be a potent adjunct to help support higher Testosterone levels and overall fertility metrics.
</div>
<div id="usediv">
<h1 id="Suggested_use" class="subtitle">Suggested Use</h1>
<p class="text">For best results, take two (2) to four (4) capsules spread throughout the day. DO NOT exceed four (4) capsules in any 24 hour period. Sigma Testosterone Booster* should be cycled. Take daily for 1 month then take at least 1 week off before resuming use.</p>
</div>
<div id="supfacts">
<h1 class="subtitle">Supplement Facts</h1>
<img id="supfacts-img" src="https://cdn.shopify.com/s/files/1/0509/3880/6441/products/image_4ea0ecec-9257-4b40-941a-da649d2c0523_800x.jpg?v=1671186765">
</div>
<div id="formdiv">
<div id="emaildiv">
<label id="labeltext">Subscribe for newsletter</label>
</div>
<form action="https://www.freecodecamp.com/email-submit">
<input name="email" type="email" placeholder="Enter your email" id="emailform">
</form>
<div id="submitdiv">
<input type="submit">
</div>
</div>
</header>
</body>
<footer>
<p>Author: Pablo Rodriguez</p>
<p><a emailto="p.rodhc@hotmail.com">p.rodhc@hotmail.com</a></p>
</footer>
</html>
