Как разместить два элемента рядом друг с другом в окружении границы?

Question

У меня есть один <div> элемент с двумя <ul> элементами внутри. Я хочу разместить их рядом, но когда я это сделаю, элементы <ul> появятся за границей раздела. Я работаю над проектом для поддельного приложения Job, демонстрирующего некоторые способности (большинство из которых у меня нет) по некоторым причинам. Я хочу, чтобы два элемента появились внутри границы. Я новичок в CSS и не уверен насчет элементов 'child' или 'sibling'.

CSS:

ul {
    text-align: left;
    font-size: 12pt;
    float: left;
    display: inline;
}

ul p {
    text-decoration: underline;
}

.section {
    border-radius: 10px;
    border: 2px solid black;
    margin: 5px;
} 

HTML:

<div class="section">
  <h1>My Abilities</h1>
  <ul>
    <ul>
      <p>Hacking</p>
      <li>Disable Alarms</li>
      <li>Access Security Cameras</li>
      <li>Delay Camera and Alarm response time</li>
      <li>Disable Guard Pagers</li>
    </ul>

    <ul>
      <p>Gunmanship</p>
      <li>Able to handle any type of weapon, big or small</li>
      <li>Resourcefull with ammo</li>
      <li>Deadshot</li>
      <li>Can play many roles, from Heavy to Stealth</li>
      <li>Great Getaway driver</li>
      <li>Fast reloader with little recoil</li>
      <li>Excellent at training others</li>
      <li>Military grade training</li>
    </ul>
  </ul>
</div>

Любая помощь приветствуется!

Answer 1

Это еще одна альтернатива, можете ли вы использовать bootstrap.

ul {
    text-align: left;
    font-size: 12pt;
    float: left;
    display: inline;
}

ul p {
    text-decoration: underline;
}


.section {
    border-radius: 10px;
    border: 2px solid black;
    margin: 5px;
} 

h1{
margin-left: 20px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="content section">
    <div class="row">
        <h1>My Abilities</h1>
    </div>
    <div class="row">
        <div class="col-6">
            <ul>
                <p>Hacking</p>
                <li>Disable Alarms</li>
                <li>Access Security Cameras</li>
                <li>Delay Camera and Alarm response time</li>
                <li>Disable Guard Pagers</li>
            </ul>
        </div>
        <div class="col-6">
            <ul>
                <p>Gunmanship</p>
                <li>Able to handle any type of weapon, big or small</li>
                <li>Resourcefull with ammo</li>
                <li>Deadshot</li>
                <li>Can play many roles, from Heavy to Stealth</li>
                <li>Great Getaway driver</li>
                <li>Fast reloader with little recoil</li>
                <li>Excellent at training others</li>
                <li>Military grade training</li>
            </ul>
        </div>
    </div>
</div>

Answer 2

Просто внесите эти изменения в эти две строки в своем коде:

ul {
    text-align: left;
    font-size: 12pt;
    /*float: left;*/ /* delete this line */
    display: inline-table; /* change this to inline-table */
}

и затем удалите внешние теги <ul>, как показано в приведенном ниже полном коде:

Полный код:

CSS:

ul {
    text-align: left;
    font-size: 12pt;
    display: inline-table;
}

ul p {
    text-decoration: underline;
}

.section {
    border-radius: 10px;
    border: 2px solid black;
    margin: 5px;
} 
.section h1 {
    margin-left: 20px;
}

HTML:

<div class="section">
        <h1>My Abilities</h1> 
            <ul>
                <p>Hacking</p>
                <li>Disable Alarms</li>
                <li>Access Security Cameras</li>
                <li>Delay Camera and Alarm response time</li>
                <li>Disable Guard Pagers</li>
            </ul>
            <ul>
                <p>Gunmanship</p>
                <li>Able to handle any type of weapon, big or small</li>
                <li>Resourcefull with ammo</li>
                <li>Deadshot</li>
                <li>Can play many roles, from Heavy to Stealth</li>
                <li>Great Getaway driver</li>
                <li>Fast reloader with little recoil</li>
                <li>Excellent at training others</li>
                <li>Military grade training</li>
            </ul>
    </div>