I can't align my List

Question

I have big problem i can't align my list, whenever i want to set padding or margin in css my background color just get bigger by px. i set in margin or padding. I will set picture so i can explain you better. What is best way to do this

header{
  background: #304852;
  color: #ffffff;
  border-bottom: #585858 3px solid;
}
header a{
  font: 1.5 Arial, Helvetica, sans-serif;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 40px;
}
header ul{
  margin: 0;
  padding: 0;
}
header li{
  /* float: left; */
  display: inline-block;
  padding: 0 20px 0 20px;

}

header nav{
  /* float: right; */
  
  text-align: right;
}
#logo{
  padding-top: 50px
}

  <header>
    <div id="logo">

    <img src="C:\Users\Mihajlo\Desktop\retardirani mihajlo\mm2.png" width="200px" height="200px">
  </div>
        <nav>
      <ul>

        <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
</ul>
</nav>
</header>

Answer 1

在父徽标ID上使用flexbox，然后将导航放在该容器中，然后将这些项目对齐在中心并将它们分开。

# Create data.table
library(data.table)
DT <- data.table(iris)

# This works, but is long and needs to be updated in multiple
# place whenever I update the output format
DT[,list(theCount=.N,
        meanSepalWidth=mean(Sepal.Width),
        meanPetalWidth=mean(Petal.Width)), 
   by=Species]

# This does not work. How could I achieve what I'm trying to do here?
col.list <-  list(theCount=.N,
        meanSepalWidth=mean(Sepal.Width),
        meanPetalWidth=mean(Petal.Width))
DT[,col.list,  by=Species]

header{
  background: #304852;
  color: #ffffff;
  border-bottom: #585858 3px solid;
}
header a{
  font: 1.5 Arial, Helvetica, sans-serif;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 20px;
}
header ul{
  margin: 0;
  padding: 0;
}
header li{
  /* float: left; */
  display: inline-block;
  padding: 0 20px 0 20px;

}

header nav{
  /* float: right; */
  
  text-align: right;
}
#logo img{border-radius: 50%;}
#logo{
  padding: 50px 0;
  /*THIS WAS ADDED*/
  display: flex;
  align-items: center;
  justify-content: space-around;
}

Answer 2

试试此代码

CSS

header{
  background: #304852;
  color: #ffffff;
  border-bottom: #585858 3px solid;
}
header a{
  font: 1.5 Arial, Helvetica, sans-serif;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 40px;
}
header ul{
  margin: 0;
  padding: 0;
}
header li{
  /* float: left; */
  display: inline-block;
  padding: 0 20px 0 20px;

}

header nav{
  float: right;

  text-align: right;
}
#logo{
  float:left;
}

header.clearfix
{
  content:"";
  display: table;
  width:100%;
}

HTML

  <header class="clearfix">
    <div id="logo">

    <img src="C:\Users\Mihajlo\Desktop\retardirani mihajlo\mm2.png" width="200px" height="200px">
  </div>
        <nav>
      <ul>

        <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
</ul>
</nav>
</header>

您拥有的代码几乎相同。使徽标和导航元素浮动，并在标题中添加一个clearfix。

希望这会有所帮助..