[randomFunParty]

So I am having trouble with the margins when making a clone for the BBC news website.

Code

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>BBC News Tech</title>
    <style type="text/css">
      #topbar {
        width: 1000px;
        margin:0 auto;
        height: 40px;
      }

      body {
        margin: 0;
        padding: 0;
      }
      #logo {
        margin-top: 8px;
        width: 100px;
        float:left;
        margin-right: 8px;
      }

      .topbar-section {
        float: left;
        border-left: 1px #CCCCCC solid;
        height:100%;
      }

      #signin-image {
        width:25px;
        margin: 12px 15px;
        float: left;
      }

      #signin-text {
        font-weight:bold;
        font-size: 90%;
        margin-top: 11px;
        position: relative;
        top:11px;
        padding-right:13px;
      }

      .topbar-menu {
        font-weight: bold;
        font-size: 90%;
        padding: 13px 15px 0 15px;
        height: 27px;
      }

      #more-arrow {
        width:16px;
        margin-left:20px;
      }

      #search-box {
        background-color: #E4E4E4;
        border: none;
        font-weight: bold;
        font-size: 14px;
        padding: 5px;
        margin: 5px 0 5px 5px;
        float:left;
      }

      #magnifying-glass {
        float:left;
        height: 26px;
        margin-top:5px;
      }

      .clear{
        clear: both;
      }

      #menu-bar-container {
        background-color: #B81919;
        width: 100%;
        height: 70px;
      }

      #menu-bar {
        width:100%;
        margin: 0 auto;
      }

      h1 {
        padding: 0;
        margin: 0;
        color: white;
        font-size: 40px;
        font-weight:normal;
        font-family: sans-serif;
        padding-top: 10px;
      }
    </style>
  </head>
  <body>
    <div id="topbar">

      <img id="logo"src="images/bbc_logo.png" width="100px" height="35px">

      <div id="signin-div" class="topbar-section">

      <img id="signin-image" src="images/signin_image.png" alt="">
        <span id="signin-text">Sign in</span>
      </div>

      <div class="topbar-section topbar-menu">
        News
      </div>

      <div class="topbar-section topbar-menu">
        Sport
      </div>



      <div class="topbar-section topbar-menu">
        Weather
      </div>


      <div class="topbar-section topbar-menu">
        iPlayer
      </div>


      <div class="topbar-section topbar-menu">
        TV
      </div>

      <div class="topbar-section topbar-menu">
        More
        <img src="images/more-arrow.png">
      </div>

      <div class="topbar-section">

        <input id="search-box" type="text" value="Search">
        <input type="image" id="magnifying-glass" src="images/magnifying-glass.png" alt="">
      </div>

    </div>

    <div class="clear"></div>

    <div id="menu-bar-container">
      <div id="menu-bar">
        <h1>NEWS</h1>
      </div>
    </div>
  </body>
</html>

Just trying to clone BBC news website as exercise. I'm having a lot of trouble replicating the menu but I think it will work if I take the time to make it work but I'm having a hard time figuring out what I'm doing wrong. Obviously, it has something to do with the CSS right?

[Nachfolger]

What exactly are you talking about?

Assuming you mean centered vertically, use a flexbox for the .topbar-menu item.

Code

.topbar-menu {
        font-weight: bold;
        font-size: 90%;
        padding: 13px 15px 0 15px;
        height: 27px;
        display: flex;
        justify-content: center;
        align-content: center;
}

https://liveweave.com/#&togetherjs=PRzJUqcoBj

[randomFunParty]

What exactly are you talking about?

Assuming you mean centered vertically, use a flexbox for the .topbar-menu item.

Code

.topbar-menu {
       font-weight: bold;
       font-size: 90%;
       padding: 13px 15px 0 15px;
       height: 27px;
       display: flex;
       justify-content: center;
       align-content: center;
}

HTML, CSS and JavaScript demo - Liveweave

The margin of #menu-bar isn't working. I set it to "0 auto" and I did the same thing with the #topbar and it doesn't do the same thing. Why isn't it working is what I'm wondering?

[Nachfolger]

The margin of #menu-bar isn't working. I set it to "0 auto" and I did the same thing with the #topbar and it doesn't do the same thing. Why isn't it working is what I'm wondering?

#topbar has a width set. #menu-bar is set to 100%, which is a direct conflict with what a margin of "0 auto" does.

Two options,
1. Set the width of #menu-bar to 1000px (like #topbar)
result (Click to View)

Code

#menu-bar-container {
background-color: #B81919;
width: 100%;
height: 70px;
}

#menu-bar {
margin: 0 auto;
width: 1000px;
}

2. Set the width of #menu-bar-container to 1000px, and add margin: 0 auto to it.
result (Click to View)

Code

#menu-bar-container {
background-color: #B81919;
width: 1000px;
height: 70px;
margin: 0 auto;
}

#menu-bar {
margin: 0 auto;
}

Just so you know, using a fixed with of 1000px is an awful idea. Learn responsive styling and media queries.

[randomFunParty]

#topbar has a width set. #menu-bar is set to 100%, which is a direct conflict with what a margin of "0 auto" does.

Two options,
1. Set the width of #menu-bar to 1000px (like #topbar)
result (Click to View)

Code

#menu-bar-container {
background-color: #B81919;
width: 100%;
height: 70px;
}

#menu-bar {
margin: 0 auto;
width: 1000px;
}

2. Set the width of #menu-bar-container to 1000px, and add margin: 0 auto to it.
result (Click to View)

Code

#menu-bar-container {
background-color: #B81919;
width: 1000px;
height: 70px;
margin: 0 auto;
}

#menu-bar {
margin: 0 auto;
}

Just so you know, using a fixed with of 1000px is an awful idea. Learn responsive styling and media queries.

Ok, what you did worked but I tried fixing the second menu bar and it doesn't line up even when I change the menu-bar-2-container: The solution for one doesn't work for the other.

Code

#menu-bar-2-container {
        width: 100%;
        margin: 0 auto;
        height: 40px;
        background-color: #dc423c;
        justify-content: center;
      }

      #menu-bar-2 {
        width: 1000px;
      }

Why doesn't my new code work the same way? I set the width to 1000px. Should be different, no?

[Nachfolger]

Ok, what you did worked but I tried fixing the second menu bar and it doesn't line up even when I change the menu-bar-2-container: The solution for one doesn't work for the other.

Code

     #menu-bar-2-container {
       width: 100%;
       margin: 0 auto;
       height: 40px;
       background-color: #dc423c;
       justify-content: center;
     }

     #menu-bar-2 {
       width: 1000px;
     }

Why doesn't my new code work the same way? I set the width to 1000px. Should be different, no?

You didn’t copy the code properly. Please copy and paste it directly.