Home/ Questions/Q 7490415
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T15:36:02+00:00

I am new to CSS and we were tasked to create a simple website,

  • 0

I am new to CSS and we were tasked to create a simple website, I’ve decided to create a simple website dedicated to avril lavigne (please don’t judge me) everything is going well, my container div is always at the center, I don’t get it why my navigation bar inside my container is going beyond the lines of the border of my container. Here’s a screenshot

screenshot

As you can see the dashed border of my nav bar is going beyond the container.

Here are my CSS rules.

body{font-size: small; background-image:url(../images/bg.gif);margin:50px 0px; padding:0px;}
#container {width:600px; margin:0px auto;padding:15px; border:1px solid white;background-color:#fff;}
.navbar{width:625px; height:45px;font-size: 13px;height: 22px;font-weight: bold;border: 2px dashed pink;repeat-x;opacity:0.6;}

.button a{float:left;margin-right:50px;color: #000;text-decoration: none;text-align: center;width: 100px;height:25px;background: url(../images/nav.jpg) repeat-x;}

Here is my HTML:

<!DOCTYPE html>
<html>
 <head>
   <title>Avril Lavigne</title>
    <link rel = "stylesheet" type = "text/css" href="style/style.css"/>
 </head>

  <body>
     <div id = "container">

         <div id = "header">
            <img src = "images/header.jpeg">
         </div>

          <div class = "navbar">
            <div class = "button"  > <a href = "#">Home</a></div>
            <div class = "button"  > <a href = "#">Simply Avril</a></div>
            <div class = "button"  > <a href = "#">Images</a></div>
            <div class = "button"  > <a href = "#">Tour Dates</a></div>     
          </div>

           <div id = "Content">
            <p id = "about">
                "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis
                et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia 
                voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
                ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
                consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam 
                quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, 
                nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit 
                qui in ea voluptate velit esse quam nihil molestiae consequatur, 
                vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
            </p>    
           </div>


     </div>
  </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The container is 600px and the navigation bar is 625px. Your navigation bar is larger than the container, so it breaks through the container. The default overflow property is set to visible, that’s why you can still see it. Try changing the width of your navigation bar to be less than the content-box of your container. Here’s some information on the box-model.

    • 0