Menu bar does not extend fully across the screen

Question

Menu bar does not extend fully across the screen

I'm struggling to get my navigation bar to cover the entire right side as seen in the picture. I've tried everything and still can't seem to figure it out. Any suggestions would be greatly appreciated.

<!doctype html>
<html lang="en">
<head>
<title>
Lighthouse Island Bistro
</title>
<link rel="stylesheet" type="text/css" href="tes.css">
<meta charset="utf-8">
</head>
<body>
<div id="wrapper">
<header>
<h1>Lighthouse Island Bistro</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="map.html">Map</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground coffee. Specialty drinks are available hot or cold</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables.</p>
<h2>Panoramic View</h2>
<p>Take in some scenery! <br> The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
</main>
<footer>
Copyright &copy; 2016
</footer>
</div>
</body>
</html>

Here is my CSS:

body
{
background-color: #010d91; 
margin: 0;
}
#wrapper
{
width: 80%;
margin: 0 auto;
background-color: white;
color: black;
}
h1
{
font-size: 50px;
text-align: center;
}
header
{
background-color: #5995f7;
padding: 10px 10px 10px 10px;   
}
nav
{
float: right;
width: 150px;
font-weight: bold;
letter-spacing: 0.1em;
}
main
{
padding:10px 20px;
color: #000000;
display: block;
overflow: auto;
}
h2
{
color: #869dc7;
}
nav ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
nav a
{
text-decoration: none;
padding: 20px;
display: block;
background-color: #89c6ed;
border-bottom: 1px solid #FFFFFF;
}
nav a:link
{
color:#ffffff
}
nav a:visited
{
color: #eaeaea;
}   
nav a:hover
{
color: #869dc7;
background-color: #eaeaea;
}
footer
{
text-align: center;
font-style: italic;
font-size: small;
padding-top: 5px;
padding-bottom: 5px;
background-color: #5995f7;
}

This is how mine looks: https://i.sstatic.net/VOKb5.png

I'm aiming for my navigation bar to expand to cover the entire width like in this example: https://i.sstatic.net/VDUZ0.png

html css

Answer 1

Answer №1

I've made some updates to your code with a few changes, hoping it will assist you. Thank you.

Enclose your <nav> and <main> within <div id="content-wrapper">, then style the content-wrapper with CSS and also include background-color: #89c6ed; in the nav CSS.

#content-wrapper {
    display: flex;
    flex-direction: row-reverse;    
}

body {
    background-color: #010d91; 
    margin: 0;
}
#wrapper {
    width: 80%;
    margin: 0 auto;
    background-color: white;
    color: black;
}
h1 {
    font-size: 50px;
    text-align: center;
}
header {
    background-color: #5995f7;
    padding: 10px 10px 10px 10px;   
}
nav {
    background-color: #89c6ed;
    float: right;
    width: 150px;
    font-weight: bold;
    letter-spacing: 0.1em;
}
main {
    padding:10px 20px;
    color: #000000;
    display: block;
    overflow: auto;
}
h2 {
 color: #869dc7;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
nav a {
    text-decoration: none;
    padding: 20px;
    display: block;
    background-color: #89c6ed;
    border-bottom: 1px solid #FFFFFF;
}
nav a:link {
    color:#ffffff
}
nav a:visited {
    color: #eaeaea;
}   
nav a:hover {
    color: #869dc7;
    background-color: #eaeaea;
}
footer {
    text-align: center;
    font-style: italic;
    font-size: small;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #5995f7;
}

#content-wrapper {
    display: flex;
    flex-direction: row-reverse;    
}

<!doctype html>
<html lang="en>
  <head>
    <title>Lighthouse Island Bistro</title>
    <link rel="stylesheet" type="text/css" href="tes.css">
    <meta charset="utf-8">
  </head>
  <body>
    <div id="wrapper">
      <header>
        <h1>Lighthouse Island Bistro</h1>
      </header>
      <div id="content-wrapper">
        <nav>
          <ul>
            <li><a href="index.html>Home</a></li>
            <li><a href="menu.html>Menu</a></li>
            <li><a href="map.html>Map</a></li>
            <li><a href="contact.html>Contact</a></li>
          </ul>
        </nav>
        <main>
          <h2>Locally Roasted Free-Trade Coffee</h2>
          <p>Indulge in the aroma of freshly ground coffee. Specialty drinks are available hot or cold</p>
          <h2>Specialty Pastries</h2>
          <p>Enjoy a selection of our fresh-baked, organic pastries, including fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
          <h2>Lunchtime is Anytime</h2>
          <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables.</p>
          <h2>Panoramic View</h2>
          <p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our     
    100-stair tower.</p>
        </main>
      </div>
      <footer>
        Copyright &copy; 2016
      </footer>
    </div>
  </body>
</html>

Answer 2

I've made some updates to your code with a few changes, hoping it will assist you. Thank you.

Enclose your <nav> and <main> within <div id="content-wrapper">, then style the content-wrapper with CSS and also include background-color: #89c6ed; in the nav CSS.

#content-wrapper {
    display: flex;
    flex-direction: row-reverse;    
}

body {
    background-color: #010d91; 
    margin: 0;
}
#wrapper {
    width: 80%;
    margin: 0 auto;
    background-color: white;
    color: black;
}
h1 {
    font-size: 50px;
    text-align: center;
}
header {
    background-color: #5995f7;
    padding: 10px 10px 10px 10px;   
}
nav {
    background-color: #89c6ed;
    float: right;
    width: 150px;
    font-weight: bold;
    letter-spacing: 0.1em;
}
main {
    padding:10px 20px;
    color: #000000;
    display: block;
    overflow: auto;
}
h2 {
 color: #869dc7;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
nav a {
    text-decoration: none;
    padding: 20px;
    display: block;
    background-color: #89c6ed;
    border-bottom: 1px solid #FFFFFF;
}
nav a:link {
    color:#ffffff
}
nav a:visited {
    color: #eaeaea;
}   
nav a:hover {
    color: #869dc7;
    background-color: #eaeaea;
}
footer {
    text-align: center;
    font-style: italic;
    font-size: small;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #5995f7;
}

#content-wrapper {
    display: flex;
    flex-direction: row-reverse;    
}

<!doctype html>
<html lang="en>
  <head>
    <title>Lighthouse Island Bistro</title>
    <link rel="stylesheet" type="text/css" href="tes.css">
    <meta charset="utf-8">
  </head>
  <body>
    <div id="wrapper">
      <header>
        <h1>Lighthouse Island Bistro</h1>
      </header>
      <div id="content-wrapper">
        <nav>
          <ul>
            <li><a href="index.html>Home</a></li>
            <li><a href="menu.html>Menu</a></li>
            <li><a href="map.html>Map</a></li>
            <li><a href="contact.html>Contact</a></li>
          </ul>
        </nav>
        <main>
          <h2>Locally Roasted Free-Trade Coffee</h2>
          <p>Indulge in the aroma of freshly ground coffee. Specialty drinks are available hot or cold</p>
          <h2>Specialty Pastries</h2>
          <p>Enjoy a selection of our fresh-baked, organic pastries, including fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
          <h2>Lunchtime is Anytime</h2>
          <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables.</p>
          <h2>Panoramic View</h2>
          <p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our     
    100-stair tower.</p>
        </main>
      </div>
      <footer>
        Copyright &copy; 2016
      </footer>
    </div>
  </body>
</html>

Answer 3

Answer №2

When modifying your nav element, remember to include:

height:100%;

Answer 4

When modifying your nav element, remember to include:

height:100%;

Answer 5

Answer №3

To address the issue, consider incorporating height:100% into your navigation element as Ernie suggested.

If this solution proves ineffective, you may want to experiment with

nav { height: 100vh; }

Answer 6

To address the issue, consider incorporating height:100% into your navigation element as Ernie suggested.

If this solution proves ineffective, you may want to experiment with

nav { height: 100vh; }

Menu bar does not extend fully across the screen

Answer №1

Answer №2

Answer №3

Similar questions

Why does appending to a TextArea field fail in one scenario but succeed in another when using Javascript?

issue arising from unique style identifiers in FireFox while making changes to styles via document.styleSheets

Acquiring the value of an input box in VBA through HTML

I'm facing an issue with my LAMP stack where the image appears when I access it through a URL, but doesn't seem to load when I try to load it using jQuery

Error encountered when using the $.post function

How do you vertically span a grid element across 3 rows using Material UI?

I am having difficulty centering the contents on the page horizontally

Unexpected behavior with async pipe - variable becomes undefined upon reassignment

Concealing the WordPress sidebar specifically for mobile phones, excluding iPads, tablets, and other devices

Is it possible for a user to chat on Whatsapp by entering their mobile number in an HTML form within the app?

What is the best way to adjust inline svg to the user viewport size?

When viewing the material-ui Chip component at normal zoom, a border outlines the element, but this border disappears when zoomed in or out, regardless of

Tips for utilizing the value retrieved from foreach within ng-repeat using angularjs

Step-by-step guide to implementing a sticky header while scrolling

PHP form script failing to process

What is the method for setting the doctype to HTML in JavaScript or React?

Emphasize the designated drop zone in Dragula

CSS - selecting elements that are greater than a specific criteria N

Can you explain the difference between dots-per-CSS-inch and dots-per-physical-inch?

Unable to navigate to specific tab in Laravel 6 navigation tabs using URL parameter (e.g. myweb/pages#tab1)