CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
Vincent Tang
Vincent Tang

Reputation: 4170

Chrome Inspection Tool not reflecting Browser Window, Aligning Div

I keep on scratching my head wondering what I did wrong when making a basic nav header using html/css.

Firefox dev tools show that my design is correct, but chrome dev tools / jsfiddle say otherwise.

enter image description here

Chrome:

enter image description here

Notice the purple lines. They aren't aligned in chrome properly, "Contact" shouldn't be cutoff

The basic gist of html/css code below: (expand full page)

.nav-background {
    background-color: green;
    width: 100%;
    height: 80px;
    position: fixed;
    top:0;
    padding: 0px;
}

.nav-img {
    display: inline-block;
    width: 60px;
    height: 100%;
}

.nav-img img {
    height: 48px;
    padding-top: 16px;
}

.nav-links {
    float: right;
    padding: 0px;
    display: flex;
    justify-content: flex-end;
    width:900px;
    height: 100%;
}

.nav-links a {
    padding-top: 20px;
    color: white;
    font-size: 2rem;
    margin-left: 1em;
}

.container {
    margin: 0 auto;
    width: 960px;
    height: 100%;
}


.about-me {
    margin: 0 auto;
    width: 960px;
    height: 200px;
    background-color: #aaa;
}
<div class="nav-background">
	<div class="container">
		<div class="nav-img"><img src="http://via.placeholder.com/150x150"></div><!--nav-img-->
		<div class="nav-links">
			<a href="#about">About</a> <a href="#portfolio">Portfolio</a> <a href="#links">Contact</a>
		</div><!--nav-links-->
	</div><!--container-->
</div><!--nav-background-->

<div class="about-me">
</div><!--about-me-->

Upvotes: 0

Views: 44

Answers (2)

csilk
csilk

Reputation: 2932

You seem to be mixing a lot of different layout styles, and are missing a reset on the body.

I'd suggest picking one ie. flexbox like so:

HTML

<div class="container">
   <div class="nav-img"><img src="https://via.placeholder.com/150x150"></div>
    <div class="nav-links">
        <a href="#about">About</a> <a href="#portfolio">Portfolio</a> <a href="#links">Contact</a>
    </div>
</div>

CSS

body {
  margin: 0;
}
.container {
  display: flex;
}
.nav-links {
  flex: 1 auto;
  text-align: right;
}

Upvotes: 1

Jonathan Nicol
Jonathan Nicol

Reputation: 3298

It is the margins on the body element that are throwing things out.

Try:

body {
    margin: 0;
}

Demo: https://jsfiddle.net/80q8esjf/

Upvotes: 1

Related Questions