I have problem. I want to place text in border in header, but the text place under the border and i dont know what to do, because it never happend to me. When i do something with the text, it just place under. THANKS

* {
  margin: 0;
  padding: 0;
}

.odkazy a {
  text-decoration: none;
  float: right;
}

.Sada {
  float: right;
}

.hlava {
  border: 1px solid white;
  background-color: lightgray;
}

<header>
  <div class="hlava">
    <div class="Sada">
      <h1>Sada.</h1>
    </div>
    <div class="odkazy">
      <strong><a href="#">Elements</a>
                    <a href="#">Shop</a>
                    <a href="#">Blog</a>
                    <a href="#">Porfolio</a>
                    <a href="#">Pages</a>
                    <a href="#">Home</a>
                </strong>
    </div>
  </div>
</header>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You use float, that's why you don't see the background with the border. You need to clear the floating by using .hlava:after.

* {
  margin: 0;
  padding: 0;
}

.odkazy a {
  text-decoration: none;
  float: right;
}

.Sada {
  float: right;
}
.hlava:after{
    content:"";
    display:block;
    clear: both 
}
.hlava {
  border: 1px solid white;
  background-color: lightgray;
}

<div class="hlava">
    <div class="Sada">
      <h1>Sada.</h1>
    </div>
    <div class="odkazy">
      <strong><a href="#">Elements</a>
                    <a href="#">Shop</a>
                    <a href="#">Blog</a>
                    <a href="#">Porfolio</a>
                    <a href="#">Pages</a>
                    <a href="#">Home</a>
                </strong>
    </div>
  </div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You mean like that?

 {
  margin: 0;
  padding: 0;
}

.odkazy a {
  text-decoration: none;
  float: right;
}

.Sada {
  text-align:right;
}

.hlava {
  border: 1px solid white;
  background-color: lightgray;
}

<header>
  <div class="hlava">
    <div class="Sada">
      <h1>Sada.</h1>
    </div>
    <div class="odkazy">
      <strong>
        <a href="#">Elements</a>
        <a href="#">Shop</a>
        <a href="#">Blog</a>
        <a href="#">Porfolio</a>
        <a href="#">Pages</a>
        <a href="#">Home</a>
      </strong>
    </div>
  </div>
</header>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>