Child elements are going out of parent element-CodePudding

In the below two screenshots, you can see the weird behavior of div.header ( parent ) and ul, li( child ) .

Due to this weird behavior, newer content(span,) in placed in the mid of the page. It's like the menu bar is not inside of header as it is supposed to be.

screenshots are below HTML and CSS codes:-

HTML:-

<body>
    <div >
        <div >
                    <div ><img src="images/logo.png" alt="logo"></div>
                    <nav>
                        <ul >
                            <li> <a href="#">Services</a></li>
                            <li><a href="#">Portfolio</a></li>
                            <li><a href="#">About Us</a></li>
                            <li><a href="#">Contact Us</a></li>
                        </ul>
 
                        <ul >
                            <li><a href="#"> 91 964941****</a></li>
                            <li><a href="#">Get a Quote</a></li>
                        </ul>
                    </nav>
        </div>
 
        <div >
            <span>DEMO SESSIONS</span>
            <h1>Get Demo Class Now</h1>
        </div>
    </div>
</body>

CSS:-

body{
    background-color:#191C26;
    color:white;
}
 
.header{
    margin-top:20px;
}
.header-image{
    width:10%;
    display: inline-block;
    position:relative;
    top:36px;
}
 
.header-image img{
    width:100%;
}
 
.left-menu, .right-menu{
 
    list-style: none;
    font-size: 200%;
}
 
.left-menu a, .right-menu a{
    text-decoration: none;
    display: inline-block;
    color:white;
}
 
.left-menu{
    float:left;
    margin:0px;
    margin-left:12%;
}
 
.left-menu li{
    float:left;
  
}
 
.left-menu a{
  margin-right:20px;
}
.right-menu{
    float:right;
    margin:0;
}
 
.right-menu li{
    float:left;
    margin-left:10px;
}
 
.right-menu a{
    margin-left:20px;
}

2nd image:-

CodePudding user response：

There are too many CSS frameworks like bootstrap, tailwind etc that can solve your problem and reduce lines of code. But if you want to create your own CSS then you can do this with flexbox and CSS grid system.

In your code adding display: inline-block; width: 100%; to your header class will fix your issue. Also use float only to main ul not li. I've made a little tweak to your code as below.

body{
    background-color:#191C26;
    color:white;
}
 
.header{
    margin-top:20px;
  border: 2px solid;
  display: inline-block;
  width: 100%;
}
.header-image{
    width:10%;
    display: inline-block;
    position:relative;
    top:36px;
}
 
.header-image img{
    width:100%;
}
 
.left-menu, .right-menu{
 
    list-style: none;
    font-size: 200%;
}
 
.left-menu a, .right-menu a{
    text-decoration: none;
    display: inline-block;
    color:white;
}
 
.left-menu{
    float:left;
    margin:0px;
    margin-left:12%;
}
 
.left-menu li{
    float:left;
  
}
 
.left-menu a{
  margin-right:20px;
}
.right-menu{
    float:right;
    margin:0;
}
 
.right-menu li{
    float:left;
    margin-left:10px;
}
 
.right-menu a{
    margin-left:20px;
}

<div >
        <div >
                    <div ><img src="images/logo.png" alt="logo"></div>
                    <nav>
                        <ul >
                            <li> <a href="#">Services</a></li>
                            <li><a href="#">Portfolio</a></li>
                            <li><a href="#">About Us</a></li>
                            <li><a href="#">Contact Us</a></li>
                        </ul>
 
                        <ul >
                            <li><a href="#"> 91 964941****</a></li>
                            <li><a href="#">Get a Quote</a></li>
                        </ul>
                    </nav>
        </div>
 
        <div >
            <span>DEMO SESSIONS</span>
            <h1>Get Demo Class Now</h1>
        </div>
        <div >
            <span>DEMO SESSIONS</span>
            <h1>Get Demo Class Now</h1>
        </div>
    </div>

CodePudding user response：

I do not sure your request, but i make this, try this maybe will work for you

* {
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #191c26;
  color: white;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 10vh;
}

nav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 1rem;
}

nav ul {
  display: flex;
  justify-content: space-between;
  align-items: center;

  font-size: 0.8rem;
}

nav ul li {
  margin: 0 0.7rem;
  list-style: none;
}
nav ul li a {
  color: white;
  text-decoration: none;
}
.content-a {
  margin-top: 2rem;
}

    <div >
      <div ><img src="images/logo.png"          alt="logo" /></div>

      <nav>
        <ul >
          <li><a href="#">Services</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
        <ul >
          <li><a href="#"> 91 964941****</a></li>
          <li><a href="#">Get a Quote</a></li>
        </ul>
      </nav>
    </div>
    <div >
      <span>DEMO SESSIONS</span>
      <h1>Get Demo Class Now</h1>
    </div>