display: flex and padding are not working , Is there any other way to adjust sidebar content?-CodePudding

I want to adjust my sidebar content but it's not working. I tried display: flex, padding, but I failed .

 .sidebar{
    border: 2px solid red;
    width: 196px;
    height: 446px;
    background-color: cadetblue;
}
.sidebar ul{
    list-style: none;
  display: flex;
  flex-direction: column;
  justify-content:space-around;
  align-content: space-around;
}

    <div class="sidebar">
        <ul>
            <li class="sideitmes">Become Travler</li>
            <li class="sideitmes">Become Guidner</li>
            <li class="sideitmes">Social Media</li>
            <li class="sideitmes">Next Plans</li>
            <li class="sideitmes">privacy policy</li>
        </ul>
     </div>

CodePudding user response：

The question doesn't have that much info, so I'm gonna guess that you want a sidebar and then some content next to it.

I would do it like this. This uses flexbox to make a sidebar that should be 15% of the page.

body {
    margin: 0;
}

.content {
    display: flex;
}

.side-bar {
    flex: 15%;
    background-color: red;
    text-align: center;
}

.main {
    flex: 85;
    background-color: blue;
    text-align: center;
}

<section class="content">

    <!-- Side bar -->
    <section class="side-bar">
        <h1>Side bar</h1>
        <p>There is something here...</p>
    </section>
    <!-- Main content -->
    <section class="main">
        <h1>Main content</h1>
        <p>There is something here</p>
    </section>
    
</section>

CodePudding user response：

.container {
  max-width: 960px;
  margin: auto;
  font-family: sans-serif;
  line-height: 1.5;
}

h2 {
  color: yellow;
}

.flex-grid {
  color: white;
  display: flex;
  margin: auto -1rem 1rem;
}

.col {
  background-color: black;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  padding: 1rem;
}

.sidebar {
  flex: 1;
}

.main {
  flex: 3;
}

<div class="container">
  <div class="flex-grid">
    <aside class="col sidebar">
      <h2>The Sidebar</h2>
    </aside>
    <section class="col main">
      <h2>The Main Content Area</h2>
    </section>
  </div>
</div>