CODEWITHSUNDEEP
htmlcss
Joe Linnemeier
Joe Linnemeier

Reputation: 79

Navbar extending all the way to the right of my webpage

I've looked through related questions/answers and haven't figured out why this is happening, but my "navbar" continues to extend all the way to the right of my web page. I tried to remove irrelevant code from this post. Any suggestions would be appreciated!

HTML

html, body, h1, h2 {
  padding:0;
  border:0;
  margin:0;
  line-height:1;
}

body {
  padding: 20px 20px 20px 20px;
}

.navbar {
  background-color:#ffcc66;
  position:fixed;
  top:0;
  width:100%;
  text-align:center;
  overflow:hidden;
  border-radius:25px;
  border:4px solid black;
}

.navbar a {
  text-decoration:none;
  color:black;
  padding:10px;
}

.navbar a:hover {
  color:white;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="keywords" content="Paiting, Maintenance, Bloomington">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title> Flying Fish Painting Company </title>
</head>

<body>

  <div class="navbar">
    <a href="C:\Users\CE User\Desktop\index.html">Home</a>
    <a href="C:\Users\CE User\Desktop\services.html">Services</a> 
    <a href="C:\Users\CE User\Desktop\contact.html">Contact</a> 
    <a href="C:\Users\CE User\Desktop\photogal.html">Photo Gallery</a> 
    <a href="C:\Users\CE User\Desktop\reviews.html">Reviews</a> 
  </div>

Upvotes: 0

Views: 47

Answers (1)

Minal Chauhan
Minal Chauhan

Reputation: 6158

Just Add left: 0; and box-sizing: border-box;

The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.

html, body, h1, h2 {
  padding:0;
  border:0;
  margin:0;
  line-height:1;
}

body {
  padding: 20px;
}

.navbar {
  background-color:#ffcc66;
  position:fixed;
  top:0;
  width:100%;
  text-align:center;
  overflow:hidden;
  border-radius:25px;
  border:4px solid black;
  left: 0;
  box-sizing: border-box;
}

.navbar a {
  text-decoration:none;
  color:black;
  padding:10px;
}

.navbar a:hover {
  color:white;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="keywords" content="Paiting, Maintenance, Bloomington">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title> Flying Fish Painting Company </title>
</head>

<body>

  <div class="navbar">

    <a href="C:\Users\CE User\Desktop\index.html">Home</a>

    <a href="C:\Users\CE User\Desktop\services.html">Services</a> 

    <a href="C:\Users\CE User\Desktop\contact.html">Contact</a> 

    <a href="C:\Users\CE User\Desktop\photogal.html">Photo Gallery</a> 

    <a href="C:\Users\CE User\Desktop\reviews.html">Reviews</a> 
  </div>

Upvotes: 2

Related Questions