Here are the HTML and CSS files I am really confused why is the border not being applied to the logo as well? I also tried to remove the overflow property but it still shows the same output. Can someone please tell me why is the logo going out border even when I include the class in CSS?

.nav {
  color: lightcyan;
  border: 2px solid gray;
  align-items: center;
  align-self: center;
  align-content: center;
  top: 0;
  position: sticky;
  justify-content: space-between;
  padding: 15px;
  margin: 10px;
  z-index: 1;
}

.nav .main_nav {
  display: flex;
  overflow: hidden;
}

.nav .logo {
  float: left;
  width: 40%;
  display: flex;
  overflow: hidden;
}

<nav class="nav">
  <div class="logo">
    <img src="https://i.pinimg.com/originals/4b/e0/d4/4be0d42d105ba2ae4488c0ca6fae5f8a.jpg" alt="Logo" srcset="" width="100px">
  </div>
  <div class="main_nav">
    <li class="links_a"><a href="#">Services</a></li>
    <li class="links_a"><a href="#">About Us</a></li>
    <li class="links_a"><a href="#">Contact</a></li>
    <li class="links_a"><a href="#">Blogsite</a></li>
  </div>
</nav>

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

CodePudding user response：

First, please use ul for the li tags, not div. You need to apply display: flex to the parent element .nav of the image and the ul in order to display them on one line. I've added width to the image container and to the ul.

.nav{
    color: lightcyan;
    border: 2px solid gray;
    align-items:center ;
    align-self: center;
    align-content: center;
    top: 0;
    position: sticky;
    justify-content: space-between;
    padding: 15px;
    margin: 10px;
    z-index: 1;
    display: flex;
}

.nav .main_nav{
    display: flex;
    overflow: hidden;
}

.nav .main_nav{
    display: flex;
    width: calc(100% - 100px);
}

<nav class="nav">
        <div class="logo">
            <img src="https://i.pinimg.com/originals/4b/e0/d4/4be0d42d105ba2ae4488c0ca6fae5f8a.jpg" alt="Logo" srcset=""
                width="100px">
        </div>
        <ul class="main_nav">
            <li class="links_a"><a href="#">Services</a></li>
            <li class="links_a"><a href="#">About Us</a></li>
            <li class="links_a"><a href="#">Contact</a></li>
            <li class="links_a"><a href="#">Blogsite</a></li>
        </ul>
    </nav>

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

CodePudding user response：

Remove the flex property from the '.nav .logo' and add it to the nav bar in general. This was my solution:

.nav{
    display: flex;
    color: lightcyan;
    border: 2px solid gray;
    align-items:center ;
    align-self: center;
    align-content: center;
    top: 0;
    position: sticky;
    justify-content: space-between;
    padding: 15px;
    margin: 10px;
    z-index: 1;
    position: sticky;
}

.nav .main_nav{
    display: flex;
    overflow: hidden;
}

.nav .logo img{
  max-width: 100px;
}

CodePudding user response：

Because the logo is floated, which allows it to extend its container. Add overflow: auto; to the container to avoid that:

.nav {
  color: lightcyan;
  border: 2px solid gray;
  align-items: center;
  align-self: center;
  align-content: center;
  top: 0;
  position: sticky;
  justify-content: space-between;
  padding: 15px;
  margin: 10px;
  z-index: 1;
  position: sticky;
  overflow: auto;
}

.nav .main_nav {
  display: flex;
  overflow: hidden;
}

.nav .logo {
  float: left;
  width: 40%;
  display: flex;
  overflow: hidden;
}

<nav class="nav">
  <div class="logo">
    <img src="https://i.pinimg.com/originals/4b/e0/d4/4be0d42d105ba2ae4488c0ca6fae5f8a.jpg" alt="Logo" srcset="" width="100px">
  </div>
  <div class="main_nav">
    <li class="links_a"><a href="#">Services</a></li>
    <li class="links_a"><a href="#">About Us</a></li>
    <li class="links_a"><a href="#">Contact</a></li>
    <li class="links_a"><a href="#">Blogsite</a></li>
  </div>
</nav>

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

CodePudding user response：

.nav { color: lightcyan; border: 2px solid gray; align-items: center; align-self: center; align-content: center; top: 0; position: sticky; padding: 15px; margin: 10px; z-index: 1; display: flex; }

.nav .logo { display: inline-block; flex: 1; }

.nav .main_nav { flex: 2; display: flex; overflow: hidden; }